如图,渲染出来的列表点击的时候需要单独给li添加一个class,但是我用v-bind:class的时候会导致全部li都被添加,如何设置data才能够让点击那个li单独添加class?
<ul>
<li v-for="choice in choices" v-on:click="next($index)" >
{{ choice.item }}
</li>
</ul>
var vq = new Vue({
el: '.secondScene',
data: {
title: qdata[rnum].title,
choices: qdata[rnum].content,
ison:false
},
methods: {
next: function($index) {
this.ison = true;
}
}
})
data中创建一个属性i。
li注册一个click事件并把$index的值传进去,在这个事件中把i赋值为$index。
然后li的v-bind:class="{classname: i==$index}"
更新/2016-01-21 22:11
在论坛看了下,[看到另外个同样问题的发帖,不知道是不是你],
<li v-for="option in options" track-by="$index">
<p :class="option.active==true?'text-success':''" v-on:click="addClass($index)">Text:{{option.text}}--Vlue:{{option.value}}
</p>
</li>
这样是可行的,就是等在data数据的每一条事先给一个值为false
的active
键
写了个DEMO:https://jsfiddle.net/rainwsy/f48t2e91/
就是我为每个li添加了一个初始active为false,有点麻烦。晚上回去再研究看看有什么方法