Vue进阶知识笔记

利用v-for循环出的多个li标签，点击不同的li变换颜色

方法一

    <ul v-for="(item,index) in list" :key="index" class="details">
        <li ref="lisd" @click="faillist(index)" :class="{'active':ind === index}">{{item.msg}}</li>
    </ul>
    
      data() {
        return {
      list: [
        {
          msg: "用户管理"
        },
        {
          msg: "用户列表"
        },
        {
          msg: "用户输入"
        },
        {
          msg: "菜单选项"
        }
      ],
      ind:''
    };
  },
  methods:{
      faillist(index){
          this.ind = index
      }
  },
复制代码

方法二

• vue项目引入jquery npm i jquery --save
  这样全局就可以使用jquery啦。

<ul v-for="(item,index) in list" :key="index" class="details">
    <li ref="li" @click="faillist($event)">{{item.msg}}</li>
</ul>

methods: {
    faillist(e) {
    //使用e.currentTarget获取当前被点击的元素
    let Dom = e.currentTarget;
    $("li").removeClass("active")
    $(Dom).addClass('active')
      console.log(Dom2)
    }
  },
复制代码

• 这样就实现了点击不同的li标签实现了变颜色

vue里面$set() 方法

作用：给data里面定义的对象添加新的属性以及value值
语法：this.$set(this.obj,'age',24)

    data(){
        return {
            student{
                name:'张三'，
                sex:'男'
            }
        }
    }
    mounted(){
        this.$set(this.student.age,24)
    }
    console.log(this.student)==>{
        student{
                name:'张三'，
                sex:'男',
                age:24
            }
    }
复制代码

• end$set() 方法