条件渲染（v-if、v-show）、列表渲染（v-for）、列表中key的原理和作用、列表过滤（filter）、列表排序（sort）

一、条件渲染

当符合某个条件后，我们就选用某种样式

1.v-if

适用于：切换频率较低的场景

特点：不展示的DOM元素直接被移除，在页面源码中无法看到

注意：v-if，v-else-if 、 else if，div要紧紧的挨在一起，不能打断 -

            
            
            <div v-if="n===1" >Angulardiv>
            <div v-else-if="n===2" >Reactdiv>
            <div v-else-if="n===3" >Vuediv>
            <div v-else >6666666div>
      


            <h2 v-if="false">欢迎来到{{name}}学习h2>
1
2
3
4
5
6
7
8
9
10

2.v-show

写法：v-show=“表达式”

适用于：切换频率较高的场景

特点：不展示DOM元素未被移除，仅仅是使用上市隐藏掉

备注：使用v-if时，元素可能无法获取到，而使用v-show一定可以获取到

            
            <h2 v-show="false">欢迎来到{{name}}学习h2>
1
2

3.template

当我们对某几个标签添加相同的样式的时候，我们就可以使用template标签，在标签上添加v-if属性

好处：不影响整体样式。

备注：template标签不影响整体结构，只是把下面这三个标签给包裹起来，在页面查看源码的时候也不会发现template标签

此标签只能使用v-if，不能使用v-show

             
             <template v-if="n===1">
                <h2>你好h2>
                <h2>中国h2>
                <h2>北京h2>
             template>
1
2
3
4
5
6
7

二、列表渲染

1.v-for

用于展示列表数据

语法：v-for=“(item,index) in xxx” :key=“yyy”

可遍历：数组、对象、字符串（用的很少）、指定次数（用的很少）

遍历数组

v-for类似java中foreach遍历,persons里面有几个值，我们在页面就会呈现几个

:key="p.id"让每一个li都有一个唯一的标识，类似数据库中的主键

{{p}} 这么输出的话，会把数据直接输出，我们一般不这样

                <li v-for="p in persons" :key="p.id">
                    {p}}  这么输出的话，会把数据直接输出，我们一般不这样 -->
                    {{p.name}}-{{p.age}}
                li> 
1
2
3
4

index就是索引值，这个地方会有索引值,类似数组的下标
:key=“p.id” 这个地方不用p.id也可以，我们使用index ，因为index也是唯一的，类似数组下标
:key这个标签特别重要,动态绑定数据

            <ul>
 
                <li v-for="(p,index) in persons" :key="index">
                    {p}}  这么输出的话，会把数据直接输出，我们一般不这样 -->
                    {{p.name}}-{{p.age}}-{{index}}
                li>
            ul>
                     如果要有顺序的话，就需要数组来存储
                     这里的id类似数据库中的主键

                data:{
 
                  persons:[
                    {id:'001',name:'张三',age:18},
                    {id:'002',name:'李四',age:18},
                    {id:'003',name:'王五',age:20}
                  ]
                },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

遍历对象

这里的对象直接就是value，不用和数组一样调用了

 
            <h2>汽车信息h2>
            <ul>
 
                <li v-for="(value,k) in car" :key="k" >
                   
                    {{value}}-{{k}}
                li>
            ul>
                data:{
 
                  car:{
                    name:'奥迪A8',
                    price:"666666",
                    color:'黑色'
                  }
                },

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

遍历字符串

            <ul>
                <li v-for="(value,k) in str" :key="k" >
            
                    {{value}}-{{k}}
                li>
            ul>
   data:{
                    str:'hello'
     }

1
2
3
4
5
6
7
8
9
10

遍历指定次数

       <ul>
                <li v-for="(number,index) in 5" :key="index" >
            
                    {{number}}-{{index}}
                li>
            ul>
1
2
3
4
5
6

三、v-for中key作用和原理

如果在写代码时并没有指定：key，我们会把index默认的作为key

通过我们查看发现，我们在源代码中是有:key的，但是在网页上并不会显示，原因就是这个：key是vue内部在用，用完就干掉了

情景

如下，当我们下边代码：key的值是index的时候，会出现一系列的问题（不同的情景不一样，可能index不会出问题）

            <h2>人员列表h2>
            <button @click="add">添加一个老刘button>
            <ul>
 
                <li v-for="(p,index) in persons" :key="index">
                    {p}}  这么输出的话，会把数据直接输出，我们一般不这样 -->
                    {{p.name}}-{{p.age}}-{{index}}
                    <input type="text">
                li>
            ul>
1
2
3
4
5
6
7
8
9
10

当我们在输入框中输入好内容，点击“添加一个老刘”，就会出现下列情况，文本框不会随着人名流动

改正

我们修改一下代码 :key=“p.id”,我们再运行一下程序就不会发生这种情况（正常运行）

            <h2>人员列表h2>
            <button @click="add">添加一个老刘button>
            <ul>
                
                、
                
                <li v-for="(p,index) in persons" :key="p.id">
                    {p}}  这么输出的话，会把数据直接输出，我们一般不这样 -->
                    {{p.name}}-{{p.age}}-{{index}}
                    <input type="text">
                li>
            ul>


1
2
3
4
5
6
7
8
9
10
11
12
13
14

总结key

1.虚拟DOM中key的作用

       key是虚拟对象的标识，当数据发生变化时，Vue会根据新数据生成新的虚拟DOM，随后Vue进行新虚拟DOM与旧虚拟DOM的差异比较。
1

2.对比规则

    ①旧虚拟DOM找到了与新虚拟DOM相同的key：

        若虚拟DOM中内容没变，直接使用之前的真实DOM

         若虚拟DOM中内容变了，则生成新的真实DOM，随后替换掉页面中之前的真实DOM

    ②旧虚拟DOM中未找到与新虚拟DOM中相同的key

         创建新的真实DOM，随后渲染到页面
1
2
3
4
5
6
7
8
9

3.用index作为key可能引发的问题

     ①若对数据进行逆序添加、逆序删除等破坏顺序操作：

         会产生没有必要的真实DOM更新==》界面效果没问题，但效率低

     ②如果结构中还包含输入类DOM：

         会产生错误DOM更新==》界面有问题
1
2
3
4
5
6
7

4.开发中如何选择key？

     ①最好使用每条数据的唯一标识作为key，比如id、手机号、身份证号、学号等（类似数据库中主键）

     ②如果不存在对数据的逆序添加、逆序删除等破坏顺序的操作，仅用于渲染列表用于展示，使用index作为key是没有问题的
1
2
3

四、列表过滤

1.watch案例

使用watch监视keyWords
1

初始界面：

当我们随便在框内输入时，下面就会显示我们想要查找的内容

初识vue

人员列表
{{p.name}}-{{p.age}}-{{p.sex}}

## 2.computed案例```html 初识vue

人员列表
{{p.name}}-{{p.age}}-{{p.sex}}

``` 效果相同

五、列表排序

DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title> 初识vuetitle>
        
        <script type="text/javascript" src="../js/vue.js">script> 
    head>
    <body>
        <div id="root">
            <h2>人员列表h2>
            
            <input type="text" placeholder="请输入名字"  v-model="keyWords">
            <button @click="sortType=2" >年龄升序button>
            <button @click="sortType=1" >年龄降序button>
            <button @click="sortType=0" >原顺序button>
 
            <ul>
                <li v-for="(p,index) in  filPersons" :key="p.id" >
                    {{p.name}}-{{p.age}}-{{p.sex}}
                li>
            ul>
 
        div>
 
        <script type="text/javascript">
            //阻止vue在启动时生成生产提示
            Vue.config.productionTip=false
            
          const vm=  new Vue({
                el:'#root',
                data:{
                  keyWords:'',
                //   0原顺序 1降序 2升序
                  sortType:0,  
                  persons:[
                    {id:'001',name:'马冬梅',age:19,sex:'女'},
                    {id:'002',name:'周冬雨',age:20,sex:'女'},
                    {id:'003',name:'周杰伦',age:21,sex:'男'},
                    {id:'004',name:'温兆伦',age:22,sex:'男'}
                  ],
                 
                },
 
                computed:{
                    // 这个形式是缩写，当getter函数使用
                    // 初次读取的时候会调用一下，当依赖的数据发生变化时也会调用一下
                    filPersons(){
                        // 我们把这个地方的return取消，不着急return
                       const arr= this.persons.filter((p)=>{
                            // 这个return是filter规定的
                            
                            return p.name.indexOf(this.keyWords) !==-1
                        })
 
                        if(this.sortType){
                            // 运行到这里说明不是0
                            arr.sort( (p1,p2)=>{
                                // 三目运算
                                return this.sortType === 1 ? p2.age-p1.age : p1.age-p2.age
                            })
                        }
                        //当 this.sortType===0时，会直接跳过if来到这里（原始数据不会改变，所以就是原顺序
                        return arr
                    }
                }
            })
 
        script>   
    body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71