美文网首页
127、vue实现 选项卡效果,点击动态 切换class

127、vue实现 选项卡效果,点击动态 切换class

作者: world_7735 | 来源:发表于2020-01-06 10:36 被阅读0次
需求:假如现在有个导航,第一个有默认样式,其它的点击谁谁有样式,而原先有样式要取消掉

直接上代码了

    <div id="app">
        <ul>
            <li v-for="(item, index) in items" :class="{'active': isActive == index}" @click="handleActive(index)">{{ item }}</li>
        </ul>
    </div>
    <script>
        var app1 = new Vue({
            el: "#app1",
            data: {
                items: ['q','w'],
                isActive: 0
            },
            methods: {
                handleActive: function(index) {
                    this.isActive = index;
                }
            }
        });
    </script>

相关文章

网友评论

      本文标题:127、vue实现 选项卡效果,点击动态 切换class

      本文链接:https://www.haomeiwen.com/subject/knfioctx.html