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个i
与thisName
对比返回ture
)推荐阅读
- 热闹中的孤独
- Shell-Bash变量与运算符
- JS中的各种宽高度定义及其应用
- 2021-02-17|2021-02-17 小儿按摩膻中穴-舒缓咳嗽
- 深入理解Go之generate
- 异地恋中,逐渐适应一个人到底意味着什么()
- vue-cli|vue-cli 3.x vue.config.js 配置
- 我眼中的佛系经纪人
- 《魔法科高中的劣等生》第26卷(Invasion篇)发售
- “成长”读书社群招募