當我們在data中寫入數據 datalist:[“11111”，“2222”，“333”]，的時候，我們用調試工具給索引值0也就是dtalist["0"]這個索引修改值的時候
我們的Vue是接受不到的(那么為什么 數組的pop shift 或者 push 可以呢？因為作者把這些方法都重新的重寫了一遍)，那我們需要怎么操作呢？
<script src="vue-2.4.0.js"></script>
<script>
var vm=new Vue({
el:'.box',
data:{
dataList:[11111,22222,3333],
dataobj:{
name:"杜偉",
age:33,
sex:'男'
}
}
})
</script>
我們需要用到 Vue.set(vm.datalist,0,"中國"); 這樣的話 就可以更改數組的0的值為中國
2.我們在設置樣式的時候是通過對象的方式設置的(這里會有點問題)，那么我們也可以使用Vue.set()方法來設置
代碼如下
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <style> .red{ background-color: red; } .green{ color: green; } .f{ font-size: 32px;; } </style> <div :class="styleobj" id="box"> <ul> <li v-for="(item,a) of dataList">{{item}}-----------{{a}}</li> </ul> </div> <script src="vue-2.4.0.js"></script> <script> var vm=new Vue({ el:'#box', data:{ dataList:[11111,22222,3333], dataobj:{ name:"杜偉", age:33, sex:'男' }, styleobj:{ red:true, green:true, } } }) </script> </body> </html>
首先呢？我們在data中的styleobj 沒有f的屬性，當我們在控制台測試的使用 vm.styleobj.f=true 頁面沒有任何變化
使用Vue.set(vm.styleobj,"f",true); 頁面有了變化了。
列表過濾 代碼如下
<div class="box">
<input type="text" v-model="mytext" @input="inputchanage()" >
<ul>
<li v-for="item in dataList" :key="item.id">{{item}}</li>
</ul>
</div>
<script src="vue-2.4.0.js"></script>
<script>
var vm=new Vue({
el:'.box',
data:{
mytext:"",
dataList:["aaaa","asdc","ddf","ffg","ccc","ssdf","wss"],
list:["aaaa","asdc","ddf","ffg","ccc","ssdf","wss"]
},
methods: {
inputchanage() {
// filter過濾 =0為true 小於0為false
var newData=this.list.filter(item=>item.indexOf(this.mytext)>-1);
this.dataList=newData;
},
},
})
</script>
說明：@input 事件為當值改變的時候，就會觸發(changage()事件是獲取焦點改變的時候觸發)
為什么定義兩個數組datalist和list 一樣的數組？ 分析：
首先如果沒有定義list數組，通過filter函數過濾出的數組會返回一個新的數組，當我們把這個newlist賦值給datalist數組后，輸入框中輸入a 會找到 ["aaaa","asdc"],這樣的話datalist
數組就變了，刪除a的時候 顯示的還是aaaa asdc，因為datalist的值已經改變
定義兩個數組，我們把datalist數組的值不動，過濾的list數組，當我們在輸入框中輸入a ，newlist =["aaaa","asdc"] 賦值給datalist，當刪除a的時候，list過濾后為
list["aaaa","asdc","ddf","ffg","ccc","ssdf","wss"] 賦值給datalist(filter函數 item為回調函數的參數，當item為aaaa 刪除a后 輸入框為"" 用aaaa
字符串查找indexOf 空字符串 >-1嗎？ 返回0 大於-1 所以所有數組的值都返回並賦值給dataList)就可以顯示了
測試 "aaaa".indexOf(""); 輸出這句話 返回0
"aaaa".indexOf(""); 輸出0
"aaaa".indexOf("f"); 輸出-1 所以 當在字符串中查找的時候 如果是空字符串是返回0的