在原生或者jQuery中,通过直接操作DOM来进行样式的渲染。
那么在Vue中也要获取dom节点进行操作吗?!
当然不需要!我们可以很方便的通过动态css判断进行渲染,下面是一个案例:
<template>
<div class="hello">
<ul>
<li
v-for="(list, index) in list"
:class="{'active':cla === index}"
@click="changeBg(index)">{{list}}</li>
</ul>
</div>
</template>
data () {
return {
list: ['列表1', '列表2', '列表3', '列表4'],
cla: ''
}
},
methods: {
changeBg: function (index) {
this.cla = index
}
}
通过点击事件将v-class动态绑定!完美的解决需求