Vue学习笔记 —— 使用Vue的ref实现动态添加活动类名

前言

因为习惯了写Jquery，后面改为Vue写后，慢慢琢磨，写了一个比较简单且使用的小Demo

解决思路

1. 给v-for循环遍历出来的数据进行绑定ref属性
2. 通过回调$event获取相关所有ref数据
3. 全部进行设置移除活动类名
4. 过滤数据后，通过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>
1
2
3
4
5
6
7
8
9
10
11

    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")
         })
    },
1
2
3
4
5
6
7
8
9
10
11
12

结束语

Vue学习笔记 —— 使用Vue的ref实现动态添加活动类名

• 如果对你有帮助的话可以给我点赞收藏，十分感谢
• 致力做优、好、细、精学习笔记分享给大家
• 可以转载 需标明 出处 本文链接。
• 笔者一个开源项目：我的世界开服助手 希望大家可以点一下star哦

感谢你的观看。