vue写的 tab栏切换,vue栏目切换, vue导航栏切换 - 前端笔记-vue的tab切换原理: 1.通过设置变量判断calss类 2.通过点击事件返回一个index索引 3.把变量等于 点击事情返回的索引 style&...

学习笔记

乾坤未定,你我皆是黑马
乾坤已定,我便扭转乾坤
首页>> >>vue写的 tab栏切换,vue栏目切换, vue导航栏切换 - 前端笔记
vue的tab切换原理:
1.通过设置变量判断calss类
2.通过点击事件返回一个index 索引
3.把变量等于  点击事情返回的索引




<style type="text/css">
    ol>li {
        floatleft;
        margin10px;
        overflowhidden;
    }
    
    ol>li.action {
        background-colorred;
    }
    
    ul>li {
        displaynone;
    }
    
    ul>li.cun {
        displayblock;
    }
</style>

<body>
    <div class="app">

        <ol>
            <!-- // : 是代表 v-bind 绑定行内样式的 -->
            <!-- v-for循环 value 代表 循环的当前向 index 代表索引 -->
            <li :class="id == index? 'action':'' " v-for="value,index in list" v-text="value.title" @click="sum(index)"></li>
        </ol>
        <ul>
            <li :class="id == index ? 'cun':''" v-for="value,index in list " v-text="value.content"></li>

        </ul>
    </div>
    <script type="text/javascript" src="./js/vue.js"></script>
    <script>
        var vm = new Vue({
            el: ".app",
            data: {
                id: 0//定义的变量
                list: [{ //要循环的数据
                    title: '选项卡1',
                    content: '111'
                }, {
                    title: '选项卡2',
                    content: '222'
                }, {
                    title: '选项卡3',
                    content: '333'
                }]
            },
            methods: {
                sumfunction(con) {
                    //点击事件的返回值等于 id变量 
                    this.id = con;
                }
            }
        })
    </script>

×

感谢您的支持,我们会一直保持!

扫码支持
请土豪扫码随意打赏

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

打赏作者
版权所有,转载注意明处:前端笔记 » vue写的 tab栏切换,vue栏目切换, vue导航栏切换
版权所有:《前端笔记
文章标题:《vue写的 tab栏切换,vue栏目切换, vue导航栏切换
除非注明,文章均为 《前端笔记》 原创
转载请注明本文短网址:https://blog.dbsgw.cn/post-24.html

发表评论

路人甲 表情
Ctrl+Enter快速提交

网友评论(0)