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() 方法

总结

以上是生活随笔为你收集整理的Vue进阶知识笔记的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。