- 通过v-bind:class 实现
<div id="app">
<div :class="{active : currentIndex == index}"
v-for="(item,index) in info"
@click="divCLick(index)">{{item}}
</div>
</div>
<script>
/**
* 设置currentIndex=0 获取当前点击的div下标值
* ①:currentIndex = 0时,
* :class="{active : currentIndex (0) == index (0)} 返回true,第一个默认显示背景颜色
* 而其他两个div:
* :class="{active : currentIndex (1) == index (0)} 返回false,没有应用css样式
* :class="{active : currentIndex (2) == index (0)} 同上
* */
const vm = new Vue({
el: "#app",
data: {
currentIndex : 0,
info : ['div1','div2','div3']
},
methods : {
divCLick(index){
this.currentIndex = index
}
}
})
</script>
- 通过v-bind:style实现
<div id="app">
<div v-for="(item,index) in info"
@click="divClick(index)"
:style="colorDiv(index)">{{item.name}}</div>
<!-- 不使用computed
:style="{backgroundColor : info[index].isActive == true ? 'green' : 'white' " -->
</div>
<script src="../js/vue.js"></script>
<script>
const vm = new Vue({
el: "#app",
data: {
info : [
{name : 'div1',isActive : false},
{name : 'div2',isActive : false},
{name : 'div3',isActive : false}
]
},
methods : {
divClick(index){
this.info[index].isActive = !this.info[index].isActive ;
}
},
/** vue中computed计算属性无法直接进行传参,如果有传参数的需求可以使用闭包函数(也叫匿名函数)实现。 */
computed : {
colorDiv() {
return function (index) {
return this.info[index].isActive == true ? {backgroundColor : 'green'} : {backgroundColor: 'white'}
}
}
}
})
</script>