Vue列表数组检测及列表过滤
当我们在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的
