Vue中点击谁让谁高亮,其他元素保持原来样式不变

每次写Vue的这个东西都会让我想起之前原生js的写法:

el.onclick = function () { for (let i = 0, len = items.length; i < len; i++) { items[i].className = ''; } this.className = 'active'; }

【Vue中点击谁让谁高亮,其他元素保持原来样式不变】到了写Vue时,感觉这样写总会引起一些其他不必要的麻烦,所以后来自己思考了一下,就有了下边这种Vue式写法:

data() { return { thisName: '', } }, methods: { btnClick(e) { this.thisName = e.target.name }, },

分析:
class的样式绑定中需要传入1个对象,对象的属性名是类名,属性值则需要true或者false,当为true时,类名则显示在元素中,并且与之对应的样式也会渲染出来。
那么就true这个值作为考量标准进行操作。
我这里在元素中绑定了name属性,当然也可以绑定其他你后边可以获取到的属性,我将name属性的值绑定为循环中的索引了,保证其唯一性
然后每个button点击时会默认传入1个事件对象
那么此时我在事件回调函数btnClick中就可以利用e.target.name获取到我在元素中绑定的name属性对应的值。
这个时候我只需要将name的值赋值给数据中thisName即可,同时在元素中写入thisName == i,此时我点一个按钮,那么thisName是必定与i相等的,就会触发高亮。
此时如果你在btnClick中给thisName赋值前打印thisName你就会发现,每次点击并且未赋值时,thisName都为上次的结果,这样就可以实现点谁谁高亮(两个数据对比时,i是唯一的,所以只会有1个ithisName对比返回ture

    推荐阅读