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的