您好,登錄后才能下訂單哦!
這篇文章主要介紹Vue改變數(shù)組中對(duì)象的屬性不重新渲染View怎么辦,文中介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們一定要看完!
在解決問題之前,我們先來了解下 vue響應(yīng)性原理: Vue最顯著的一個(gè)功能是響應(yīng)系統(tǒng)-- 模型只是一個(gè)普通對(duì)象,修改對(duì)象則會(huì)更新視圖。
受到j(luò)avascript的限制,Vue不能檢測到對(duì)象屬性的添加或刪除,因?yàn)関ue在初始化實(shí)列時(shí)將屬性轉(zhuǎn)為getter/setter,所以屬性必須在data對(duì)象上才能讓vue轉(zhuǎn)換它。
但是vue可以使用 Vue.set(object, key, value)方法將響應(yīng)屬性添加到嵌套的對(duì)象上:如下代碼:
Vue.set(obj, '_isHover', true);
或者可以使用vm.$set的實(shí)列方法,也是Vue.set方法的別名:
this.$set(obj, '_isHover', false);
問題: 頁面上多個(gè)item項(xiàng), 當(dāng)我鼠標(biāo)移動(dòng)上去的時(shí)候,我想在該數(shù)組中的對(duì)象添加一個(gè)屬性 isHover=true, 當(dāng)鼠標(biāo)移出的時(shí)候,我想讓該屬性變?yōu)?isHover=false,然后希望改變對(duì)象的屬性的時(shí)候讓其重新渲染view層,重新執(zhí)行rowClasses方法,然后該方法會(huì)判斷 isHover是否等于true,如果為true的話,讓其增加一個(gè)類名。
代碼如下:
<!DOCTYPE html> <html> <head> <title>演示Vue</title> <style> * {margin: 0; padding: 0;} ul, li {list-style: none;} #app {width: 800px; margin: 20px auto; border:1px solid #ccc; border-bottom: none;} #app li {height: 32px; line-height: 32px; border-bottom: 1px solid #ccc;} #app li.bgColor {background-color: red;} </style> </head> <body> <div id='app'> <ul> <li v-for="(item, index) in items" @mouseenter.stop="handleMouseIn(index)" @mouseleave.stop="handleMouseOut(index)" :class="rowClasses(index)" > <span>{{item.name}}</span> </li> </ul> </div> </body> <script src="https://tugenhua0707.github.io/vue/vue1/vue.js"></script> <script type="text/javascript"> new Vue({ el: '#app', data: { items: [ {name: 'kongzhi'}, {name: 'longen'}, {name: 'tugenhua'} ] }, computed: { }, methods: { rowClasses (index) { return [ { [`bgColor`]: this.$data.items[index] && this.$data.items[index]._isHover } ] }, handleMouseIn(index) { if (this.$data.items[index]._isHover) { return; } console.log(111); // 可以執(zhí)行到 this.$data.items[index]._isHover = true; }, handleMouseOut(index) { this.$data.items[index]._isHover = false; } } }); </script> </html>
查看效果
可以看到鼠標(biāo)移動(dòng)上去的時(shí)候 沒有效果。
解決的方案如下:
1. 使用 Object.assign
鼠標(biāo)移動(dòng)上去的時(shí)候 代碼可以改成如下:
this.$data.items[index]._isHover = true; this.$data.items = Object.assign({}, this.$data.items);
鼠標(biāo)移出的時(shí)候,代碼改成如下:
this.$data.items[index]._isHover = false; this.$data.items = Object.assign({}, this.$data.items);
代碼如下:
<!DOCTYPE html> <html> <head> <title>演示Vue</title> <style> * {margin: 0; padding: 0;} ul, li {list-style: none;} #app {width: 800px; margin: 20px auto; border:1px solid #ccc; border-bottom: none;} #app li {height: 32px; line-height: 32px; border-bottom: 1px solid #ccc;} #app li.bgColor {background-color: red;} </style> </head> <body> <div id='app'> <ul> <li v-for="(item, index) in items" @mouseenter.stop="handleMouseIn(index)" @mouseleave.stop="handleMouseOut(index)" :class="rowClasses(index)" > <span>{{item.name}}</span> </li> </ul> </div> </body> <script src="https://tugenhua0707.github.io/vue/vue1/vue.js"></script> <script type="text/javascript"> new Vue({ el: '#app', data: { items: [ {name: 'kongzhi'}, {name: 'longen'}, {name: 'tugenhua'} ] }, computed: { }, methods: { rowClasses (index) { return [ { [`bgColor`]: this.$data.items[index] && this.$data.items[index]._isHover } ] }, handleMouseIn(index) { if (this.$data.items[index]._isHover) { return; } console.log(111); // 可以執(zhí)行到 this.$data.items[index]._isHover = true; this.$data.items = Object.assign({}, this.$data.items); }, handleMouseOut(index) { this.$data.items[index]._isHover = false; this.$data.items = Object.assign({}, this.$data.items); } } }); </script> </html>
查看效果
2. 使用Vue.set(object, key, value)方法將響應(yīng)屬性添加到嵌套的對(duì)象上。
鼠標(biāo)移動(dòng)上去的時(shí)候 代碼可以改成如下:
this.$set(this.$data.items[index], '_isHover', true);
鼠標(biāo)移出的時(shí)候,代碼改成如下:
this.$set(this.$data.items[index], '_isHover', false);
所有的代碼如下:
<!DOCTYPE html> <html> <head> <title>演示Vue</title> <style> * {margin: 0; padding: 0;} ul, li {list-style: none;} #app {width: 800px; margin: 20px auto; border:1px solid #ccc; border-bottom: none;} #app li {height: 32px; line-height: 32px; border-bottom: 1px solid #ccc;} #app li.bgColor {background-color: red;} </style> </head> <body> <div id='app'> <ul> <li v-for="(item, index) in items" @mouseenter.stop="handleMouseIn(index)" @mouseleave.stop="handleMouseOut(index)" :class="rowClasses(index)" > <span>{{item.name}}</span> </li> </ul> </div> </body> <script src="https://tugenhua0707.github.io/vue/vue1/vue.js"></script> <script type="text/javascript"> new Vue({ el: '#app', data: { items: [ {name: 'kongzhi'}, {name: 'longen'}, {name: 'tugenhua'} ] }, computed: { }, methods: { rowClasses (index) { return [ { [`bgColor`]: this.$data.items[index] && this.$data.items[index]._isHover } ] }, handleMouseIn(index) { if (this.$data.items[index]._isHover) { return; } console.log(111); // 可以執(zhí)行到 this.$set(this.$data.items[index], '_isHover', true); }, handleMouseOut(index) { this.$set(this.$data.items[index], '_isHover', false); } } }); </script> </html>
以上是“Vue改變數(shù)組中對(duì)象的屬性不重新渲染View怎么辦”這篇文章的所有內(nèi)容,感謝各位的閱讀!希望分享的內(nèi)容對(duì)大家有幫助,更多相關(guān)知識(shí),歡迎關(guān)注億速云行業(yè)資訊頻道!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請(qǐng)聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。