vue中 给v-for渲染的元素动态添加移除类名
今天在项目中需要做一个效果，点击对应的li改变当前的color，其他的li取消颜色，在jQuery中这很容易，由于之前已经引入了jQuery，所以直接想到了这个办法。
但是出于未知的原因，jQuery获取不到v-for出来的数据，根本找不到dom节点，所以不得不改变思路。
然后我想到了V-bind的方法。下面贴上步骤。
1.在data里面生明一个属性，默认值最好为数字类型，并且不得大于当前元素+所有兄弟元素的length，可以默认为0（第一个元素选中）
current: '0', //如果不想默认被选中，就把值设为一个超出所有元素length的数字
2.在当前元素中添加动态class： “:class”，根据vue的class和style的绑定特性写出类似“v-bind:class="{ classred:index==current}"”，当然其他方法很多，可以根据文档自行选择
<ul class="list"><li v-for="(item,index) in list" :key="index" @click="handleList(index)" :class="{red:index==current}">{{item.name}}</li>‘red’是你要给的类名 </ul>
3.给元素点击事件，传入当前元素的index，把元素当前的index赋值给data里面的申明的属性
handleList (index) {this.current = index;},
这样就大功告成了，下面展示完整代码
<!-- --><template><div><ul><li v-for="(item,index) in liList" v-on:click="addClass(index)" v-bind:class="{ classred:index==current}">{{item.name}}</li></ul></div></template><script>export default {components: {},data () {return {liList:[{name:'张三'},{name:'李四'},{name:'王五'}],current:0,};},methods: {addClass:function(index){ this.current=index;}}}</script><style scoped>.classred{ color:red; }</style>
