1.鼠标点击一个div,里面字体跟着变换,当点击另一个,之前那个变成初始状态。
类似于下面那图,点击专辑时候字体跟边框底部颜色改变,栏目那一栏无变化。
步骤:1.样式绑定
<div class="tab-title" :class="{'tab-active':activeIndex==0}" @click="getData(0)">
专辑
</div>
tab-title:是原本的样式;
tab-active:是点击后的样式,触发条件当activeindex=0的时候会触发。
2.在data里给activeindex进行数据绑定,无这一步操作就不会显示。
3.给getData添加一个方法:
methods:{getData(index) {
this.activeIndex = index;
if (index == 0) {
console.log("查询专辑数据");
}
}}
方法是当activeindex的值等于getData(0)括号里index的值才显示。
4.data里添加activeIndex:true
data() {
return {
activeIndex: true
}
},