共计 898 个字符,预计需要花费 3 分钟才能阅读完成。
每次写 Vue
的这个货色都会让我想起之前原生 js 的写法:
el.onclick = function () {for (let i = 0, len = items.length; i < len; i++) {items[i].className = '';
}
this.className = 'active';
}
到了写 Vue
时,感觉这样写总会引起一些其余不必要的麻烦,所以起初本人思考了一下,就有了下边这种 Vue 式
写法:
<div class="btn-group">
<button
:class="{active: thisName == i}"
v-for="(item, i) in propSwiperData"
:key="i"
:name="i"
v-text="item.title"
@click="btnClick"
></button>
</div>
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
)
正文完
发表至: javascript
2022-01-22