Vue列表渲染

一，基本列表渲染需要用到基本标签<ul>、<li>，以及v-for指令；

1.v-for指令：①用于展示列表数据

                     ②语法：v-for = "形参  in/of  数据池"  :key = "形参（用于形成唯一的标识）"；

                     ③数据池：数组、对象、字符串、指定次数；

                        形参：形参可以为多个（形参，索引（index））支持使用可选的第二个参数表示                                       当前项的位置索引。

2.使用：persons数组、car对象、字符串str、指定数字

        key从0开始计数

        <li v-for="(p,index) of persons" :key="index">  {{p.属性}}

        <li v-for="(value,k) of car" :key="k"> {{value}}

        <li v-for="(char,index) of str" :key="index"> {{char}}

        <li v-for="(number,index) of 7" :key="index"> {{number}}

3.key的原理 （通过key来管理状态）

        为了给 Vue 一个提示，以便它可以跟踪每个节点的标识，从而重用和重新排序现有的元素，你需要为每个元素对应的块提供一个唯一的 key;

        :key = id   （对象）   

        :key = index（数组）

4.用index作为key可能会引发的问题：

       1. 若对数据进行：逆序添加、逆序删除等破坏顺序操作:会产生没有必要的真实DOM更新，                 效率低

       2. 如果结构中还包含输入类的DOM:会产生错误DOM更新 ，界面有问题。

5.开发中如何选择key?

        1.最好使用每条数据的唯一标识作为key。

        2.如果不存在对数据的逆序添加、逆序删除等破坏顺序操作，则可用index作为key值

二，列表过滤与排序

过滤：

分为两步------1.获取键盘用户的输入

                      2.写filter过滤器（不会更改原数组，返回的是一个新数组）：

                                                ①：watch（监视属性）实现

          /* keyword为键盘获取的字符，filPersons 为一个空数组，persons 为原先含有数据的数组 */
          watch:{
                    
					keyWord:{
						immediate:true,
						handler(val){
							this.filPerons = this.persons.filter((p)=>{
								return p.name.indexOf(val) !== -1
							})
						}
					}
				}

                                                 ②：computed (计算属性)  实现

       /* persons 为原先数组含有数据，filPerons 作为v-for中的数据池, keyword 为键盘输入*/
       computed:{
					filPerons(){
						return this.persons.filter((p)=>{
							return p.name.indexOf(this.keyWord) !== -1
						})
					}
				}

indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置。

如果没有找到匹配的字符串则返回 -1。

注： indexOf() 方法区分大小写。

排序

       /*sortType = 0原顺序 1降序 2升序 ,根据年龄来排序
        ，默认升序 sort（a ，b）{ return a-b 升序  b-a 降序}，降序reverse（） */
       computed:{
					filPerons(){
						const arr = this.persons.filter((p)=>{
							return p.name.indexOf(this.keyWord) !== -1
						})
						//判断一下是否需要排序
						if(this.sortType){
							arr.sort((p1,p2)=>{
								return this.sortType === 1 ? p2.age-p1.age : p1.age-p2.age
							})
						}
						return arr
					}
				}

      官方文档：在计算属性中使用 reverse() 和 sort() 的时候务必小心！这两个方法将变更原始数组，计算函数中不应该这么做。请在调用这些方法之前创建一个原数组的副本。