利用v-for循環(huán)出的多個(gè)li標(biāo)簽，點(diǎn)擊不同的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: "菜單選項(xiàng)"}],ind:''};},methods:{faillist(index){this.ind = index}}, 復(fù)制代碼

方法二

• vue項(xiàng)目引入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獲取當(dāng)前被點(diǎn)擊的元素let Dom = e.currentTarget;$("li").removeClass("active")$(Dom).addClass('active')console.log(Dom2)}}, 復(fù)制代碼

• 這樣就實(shí)現(xiàn)了點(diǎn)擊不同的li標(biāo)簽實(shí)現(xiàn)了變顏色

vue里面$set() 方法

作用：給data里面定義的對(duì)象添加新的屬性以及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}} 復(fù)制代碼

• end$set() 方法

總結(jié)

以上是生活随笔為你收集整理的Vue进阶知识笔记的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。