vue实现 选项卡效果,点击动态 切换class
需求:假如现在有个导航,第一个有默认样式,其它的点击谁谁有样式,而原先有样式要取消掉直接上代码了style<style>.active {color: #f00}ul li {float: left;padding: 10px}</style>html&l...
·
需求:假如现在有个导航,第一个有默认样式,其它的点击谁谁有样式,而原先有样式要取消掉
直接上代码了
style
<style>
.active {
color: #f00
}
ul li {
float: left;
padding: 10px
}
</style>
template
<div id="app">
<ul>
//istrue==index 点击的时候,获取到当前点击的索引,相等为真,反之为假
<li v-for='(item,index) in items' :class="{active:istrue==index}" @click="istrue=index">
{{ item.name }}
</li>
</ul>
</div>
js代码
<script>
var example1 = new Vue({
el: '#app',
data: {
//istrue 默认是0,正好是索引为0的元素
istrue: 0,
items: [
{name:'首页'},
{name:'列表'},
{name:'详情'}
]
},
})
</script>
更多推荐
已为社区贡献20条内容
所有评论(0)