【精讲】vue中的key原理（内含案例）、案例：采用watch与计算属性过滤列表（筛选用户信息）、实现筛选，升序，降序，原顺序等功能

目录

key原理（内含案例）

案例1：采用watch过滤列表（筛选用户信息）

案例2：采用watch过滤列表（筛选用户信息）

实现筛选、升序、降序、原顺序等功能

---

第一部分：key原理（内含案例）

<!-- key的原理 -->
        <div id="root">
            <ul>
                <h2>人员信息</h2>
                <!-- once指的是只执行一次就结束该点击按钮 -->
                <button @click.once="acrt">添加一个老刘</button>
                <!-- 遍历数组 -->
                <!-- 1,真是dom中key被vue征用了，虚拟dom是有key的索引值，所以在li里面是不会显示key的值，若是使用index，在添加某个功能时，我们在li标签内部添加表单    同时添加一个人的数据以及在数据的后面
                都添加一个input表单，类型是text  那样内部的数据就会交互，index不具有唯一性，而p.id具有数据的唯一性，就好比一个人的身份证，数据具有唯一性-->
                <li v-for="(p,index) of persons"  :key="p.id">
                 {{p.name}}-{{p.age}}
                 <!-- 因测试添加下面的表单 -->
                 <!-- <input type="text" /> -->
                 <!-- 注：若是按照顺序添加，那么就正常添加不会出现问题 -->
                </li>
            </ul>
        </div>
        <script type="text/javascript">
            const vm = new Vue({
                el:'#root',
                data:{
                persons:[
                    {id:'001',name:'张三',age:18},
                    {id:'002',name:'李四',age:19},
                    {id:'003',name:'王五',age:20}
                ]
                },
                methods:{
                    acrt(){
                        // 函数内部的数据不能添加逗号,只能添加分号,否则就会报语法错误
                    const p = {id:'004',name:'老刘',age:23}
                    // 将数据添加值persons数组的最前面
                    this.persons.unshift(p)
                    // console.log(this)
                    }
                }
                })
        </script>

 第二部分：案例1：采用watch过滤列表（筛选用户信息）

<div id="root">
            <!-- 设置双向绑定，获取用户输入的数据 -->
            <input type="text" placeholder="请输入名字" v-model="keyword"/>
            <ul>
                <h2>人员信息</h2>
                <!-- 遍历filpersons内部的数据  -->
                <li v-for="(item,index) of filpersons"  :key="item.id">
                    {{item.name}}-{{item.age}}-{{item.sex}}
                </li>
            </ul>
        </div>

        <script type="text/javascript">
          const vm = new Vue({
              el:'#root',
              data:{
                // 起始内容是空
            keyword:'',
              persons:[
                  {id:'001',name:'马冬梅',age:18,sex:'女'},
                  {id:'002',name:'周冬雨',age:19,sex:'女'},
                  {id:'003',name:'周杰伦',age:20,sex:'男'},
                {id:'004',name:'温兆伦',age:23,sex:'男'}
              ],
            // 创建一个空数组
            filpersons:[]
              },
            // 使用一个watch侦听数组persons内部的值
            watch:{
            // 侦听keyword内部数据变化
            keyword:{
            immediate:true,
              handler(val){
                // 筛选出参数内容为item
            this.filpersons = this.persons.filter((item)=>{
                // 返回出item内部的name值是否在含有,若没有是-1,若有返回的是数据
                return item.name.indexOf(val) !==-1
                // 将返回的值传给filpersons
            })
            }
            }
            }
              })

        </script>

案例2：采用watch过滤列表（筛选用户信息）

<div id="root">
            <!-- 设置双向绑定，获取用户输入的数据 -->
            <input type="text" placeholder="请输入名字" v-model="keyword" />
            <ul>
                <h2>人员信息</h2>
                <!-- 遍历filpersons内部的数据  -->
                <li v-for="(item,index) of filpersons" :key="item.id">
                    {{item.name}}-{{item.age}}-{{item.sex}}
                </li>
            </ul>
        </div>
        <!-- 采用计算属性去筛选 -->
        <script type="text/javascript">
            const vm = new Vue({
                el: '#root',
                data: {
                    // 起始内容是空
                    keyword: '',
                    persons: [{
                            id: '001',
                            name: '马冬梅',
                            age: 18,
                            sex: '女'
                        },
                        {
                            id: '002',
                            name: '周冬雨',
                            age: 19,
                            sex: '女'
                        },
                        {
                            id: '003',
                            name: '周杰伦',
                            age: 20,
                            sex: '男'
                        },
                        {
                            id: '004',
                            name: '温兆伦',
                            age: 23,
                            sex: '男'
                        }
                    ]
                },
                // 采用计算属性去获取数据
                computed: {
                    // 这里放置方法
                   filpersons(){
                       // 返回筛选出来的值传入页面中的filpersons集合里  item是persons内部的数据
                       return this.persons.filter((item)=>{
                           // 判断item中的姓名与用户输入的this.keyword内部数据是否一直,若不一直则等于-1
                           return item.name.indexOf(this.keyword) !==-1
                       })
                   }
                }

            })
        </script>

第三部分：实现筛选、升序、降序、原顺序等功能

<div id="root">
            <h2>人员列表</h2>
            <input type="text" placeholder="请输入姓名"  v-model="keyword" />
            <button @click="sortType=2">年龄升序</button>
            <button @click="sortType=1">年龄降序</button>
            <button @click="sortType=0">原顺序</button>
            <ul>
                <li v-for="(item,index) of  filPerons" :key="item.id">
                    {{item.name}}-{{item.age}}-{{item.sex}}
                </li>
            </ul>
        </div>
        <script type="text/javascript">
            const vm = new Vue({
                el: '#root',
                data: {
                    // 起始内容是空
                    keyword: '',
                    sortType:0,//0代表原顺序  1代表降序  2代表升序
                    persons: [{
                            id: '001',
                            name: '马冬梅',
                            age: 18,
                            sex: '女'
                        },
                        {
                            id: '002',
                            name: '周冬雨',
                            age: 19,
                            sex: '女'
                        },
                        {
                            id: '003',
                            name: '周杰伦',
                            age: 20,
                            sex: '男'
                        },
                        {
                            id: '004',
                            name: '温兆伦',
                            age: 23,
                            sex: '男'
                        }
                    ]
                },// 采用计算属性去获取数据
                computed: {
                    // 这里放置方法
                   filPerons(){
                       // 筛选出来的值赋给arr变量  item是persons内部的数据
                       const arr = this.persons.filter((item)=>{
                           // 判断item中的姓名与用户输入的this.keyword内部数据是否一直,若不一致则等于-1
                           return item.name.indexOf(this.keyword) !==-1
                       })
                       // 通过获取data中this.sortType中的数据是否是真还是假 
                       if(this.sortType){
                         // 对获取的数据进行判断是升序还是降序
                         arr.sort((a,b)=>{
                         // 运用三元运算符去判断升序还是降序
                         return  this.sortType==1? b.age-a.age:a.age-b.age
                         })  
                       }
                       // 随后通过上面的判断得出升序还是降序之后,会有数据传给arr变量中,那么我们在外面就直接对他进行设置返回值
                       return arr
                   }
                }
                })
            
        </script>