在解決問題之前，我們先來了解下 vue響應(yīng)性原理： Vue最顯著的一個(gè)功能是響應(yīng)系統(tǒng)-- 模型只是一個(gè)普通對(duì)象，修改對(duì)象則會(huì)更新視圖。
受到j(luò)avascript的限制，Vue不能檢測(cè)到對(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);
問題： 頁(yè)面上多個(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í)候，代碼改成如下：
新聞熱點(diǎn)
疑難解答
圖片精選
