条件渲染和列表渲染

条件渲染和列表渲染

条件渲染

v-for比v-if具有优先级，不推荐同时使用

v-if指令

写法：

(1).v-if=”表达式”

(2).v-else-if=”表达式”

(3).v-else=”表达式”

适用于：切换频率较低的场景。(因为v-if判断是否渲染到页面上，如果多次切换会对效率有一点点影响)

特点：不展示的DOM元素直接被移除。

注意：v-if可以和:v-else-if、v-else一起使用，但要求结构不能被“打断”。

1
2
3

<div v-if="istrue">aaaaaaa</div>
<div v-else>bbbbbbb</div>
//判断isshow为true时渲染aaaa当不为true时渲染bbb

v-show指令

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

适用于：切换频率较高的场景。(v-show判断标签是否展示通过display属性来控制，所以不会一直挂载卸载，效率优化)

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

注意：v-show不能和template配合使用。(因为template标签本质就不会渲染到页面上也没有display属性)

1

<div v-show="istrue">aaaaaaa</div>

列表渲染 v-for属性

1.用于展示列表数据

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

可遍历：数组、对象、字符串（用的很少）、范围值，比如数值（用的很少）

当数据源为数组时

1
2
3
4
5
6
7
8
9
10

<ul>
            <!-- message代表数据源 -->
            <!-- item代表的数据的每一项目 -->
            <!-- index 取到是数据的索引 -->
            <!-- in也可以替换成of 效果一样 -->
            <li v-for="(item,index) in message">
                {{item}}
                {{index}}
            </li>
        </ul>

当数据源为对象时

1
2
3
4
5
6
7
8
9
10
11

<ul>
            <!-- message代表数据源 -->
            <!-- value代表的是键值 -->
            <!-- key代表的是键名 -->
            <!-- index 取到是数据的索引 -->
            <!-- in也可以替换成of 效果一样 -->
            <li v-for="(value,key,index) in message">
                {{item}}
                {{index}}
            </li>
        </ul>

:key属性

当使用v-for时尽量给每一个渲染出来的数据提供:key属性，除非操作dom的环境很简单，以便于提升Vue的工作效率

虚拟DOM中:key的作用

key是虚拟DOM对象的标识，当数据发生变化时，Vue会根据【新数据】生成新的虚拟DOM

随后Vue进行【新虚拟DOM】与【旧虚拟DOM】的差异比较

虚拟DOM由rander构造函数生成，以对象的方式呈现(后续会讲)，所以Vue为了更节流使用:key属性来合并先后两个rander构造函数的实例对象，把不同的节点合并，相同的节点保留，所以如果渲染列表数据时需要给模板上的每一份数据渲染加上:key属性以确保唯一性。

diff算法对比规则

(1).旧虚拟DOM中找到了与新虚拟DOM相同的key：

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

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

(2).旧虚拟DOM中未找到与新虚拟DOM相同的key

创建新的真实DOM，随后渲染到到页面。

如何合理使用key属性

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

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

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

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

会产生错误DOM更新 ==> 界面有问题。

开发中如何选择key

1.最好使用每条数据的唯一标识作为key, 比如id、手机号、身份证号、学号等唯一值。

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