javascript - vue里如何实现tab类似的切换class？

Question

数据
[{

name:'aaa',
id:'0',
iscur:false

},{

name:'bbb',
id:'1',
iscur:false

},{

name:'ccc',
id:'2',
iscur:true

}
]

html:

<li v-for='item in data'>{{ item.name }}</li>

我需要分别点击 li 添加一个class cur，同时更新状态到data里的iscur
操作数据的iscur:true 时 当前 li 也自动添加/删除 cur，

请问这个操作 用vuejs 怎么实现呢？

Answer 1

很多种方法可以实现你想要的效果：
代码示例：

<li v-for='item in data' v-text="item.name" :class="{cur:item.iscur}" @click="setCur($index)"></li>

在methods中加入方法setCur()

setCur: function (index) {
    this.data.map(function (v,i) {
        i==index? v.iscur=true: v.iscur=false;
    });
}

---

方法2 :
在data中增加一个iscur变量

data: {
    iscur:1,
    data:[]
}

li的写法就变成了：

<li v-for='item in data' v-text="item.name" :class="{cur:iscur==$index}" @click="iscur=$index"></li>

Answer 2

数据本来就是绑定的，你可以把数据写在 data 里，点击的时候 toggle 相应的 iscur 的布尔值，然后再定义一个 computed 的属性 current(incur)，`return iscur ? 'cur' : '';｀ 即可。

<p :class=[current(data[0].iscur)] >