前言
因为习惯了写Jquery,后面改为Vue写后,慢慢琢磨,写了一个比较简单且使用的小Demo
解决思路
- 给v-for循环遍历出来的数据进行绑定ref属性
- 通过回调$event获取相关所有ref数据
- 全部进行设置移除活动类名
- 过滤数据后,通过nextTick设置活动类名
案例代码
<div class="color_selection" style="width: 200px;height: 36px;">
<div @click="changeSelect($event)" :data-index = "index" ref="color" style="width: 47px;height: 36px;border: 1px solid #dcdfe6;">
<div class="color" style="width: 16px;height:16px;border: 1px solid #e6e6e6;line-height: 16px;position: absolute;left: 15px;top: 10px;"></div>
</div>
<div ref="color" @click="changeSelect($event)":data-index = "index" style="width: 47px;height: 36px;border: 1px solid #dcdfe6;">
<div class="color" style="width: 16px;height: 16px;background: #000;text-align: center;line-height: 16px;position: absolute;left: 15px;top: 10px;"></div>
</div>
<div @click="changeSelect($event)" :data-index ="index" ref="color" style="width: 47px;height: 36px;border: 1px solid #dcdfe6;">
<div class="color" style="width: 16px;height: 16px;background: red;text-align: center;line-height: 16px;position: absolute;left: 15px;top: 10px;"></div>
</div>
</div>
changeSelect(ev){
var target = ev.currentTarget;
var index = ev.currentTarget.dataset.index;
for(var i = 0;i<this.$refs.color.length;i++){
var data = this.$refs.color[i];
data.setAttribute("class","color");
}
this.$nextTick(() => {
console.log(this.$refs.refContent)//有结果
target.setAttribute("class","color color_select")
})
},
结束语
Vue学习笔记 —— 使用Vue的ref实现动态添加活动类名
- 如果对你有帮助的话可以给我点赞收藏,十分感谢
- 致力做优、好、细、精学习笔记分享给大家
- 可以转载 需标明 出处 本文链接。
- 笔者一个开源项目:我的世界开服助手 希望大家可以点一下star哦
感谢你的观看。