5.8v-if等

Posted 2021-02-28 edfg

条件判断 v-if, v-else-if, v-else, 及条件渲染 v-show

v-if, v-else-if, v-else

这三个指令与javascript的条件语句if, else, else if类似.

? ?

Vue的条件指令可以根据表达式的值在DOM中渲染或销毁元素或组件

? ?

简单的案例演示:

? ?

? ?

v-if的原理:

? ?

v-if后面的条件为false时, 对应的元素以及其子元素不会渲染.

也就是根本没有不会有对应的标签出现在DOM中.

v-show

v-show的用法和v-if非常相似, 也用于决定一个元素是否渲染:

? ?

v-show 和 v-if 的区别

v-if是真正的条件渲染, 他会确保在切换过程中条件块内的时间和子组件被销毁和重建(组件被重建将会调用created)

v-show不论如何, 都会被渲染在DOM中, 当条件为真值时, 将会修改条件的css样式

v-if有更高的切换开销, v-show有更高的初始渲染开销

v-if是动态的向DOM树内添加或者删除DOM元素；v-show是通过设置DOM元素的display样式属性控制显隐；

v-if切换有一个局部编译/卸载的过程, 切换过程中合适地销毁和重建内部的事件监听和子组件；v-show只是简单的基于css切换；

v-if是惰性的, 如果初始条件为假, 则什么也不做；只有在条件第一次变为真时才开始局部编译(编译被缓存?编译被缓存后, 然后再切换的时候进行局部卸载); v-show是在任何条件下(首次条件是否为真)都被编译, 然后被缓存, 而且DOM元素保留；

v-if有更高的切换消耗；v-show有更高的初始渲染消耗；

v-if适合运营条件不大可能改变；v-show适合频繁切换.

v-if和v-show都可以决定一个元素是否渲染, 那么开发中我们如何选择呢?

? ?

v-if当条件为false时, 压根不会有对应的元素在DOM中.

v-show当条件为false时, 仅仅是将元素的display属性设置为none而已.

开发中如何选择呢?

? ?

当需要在显示与隐藏之间切片很频繁时, 使用v-show

当只有一次切换时, 通过使用v-if

? ?

一般不要直接在代码里写v-if的判断, 比如那个判断成绩等级, 最好是在computed属性里计算完之后展示给前台

computed: { getResult: function () { if (this.score >= 90) { return ‘优秀‘; } else if (this.score < 90 && this.score >= 80) { return ‘优良‘; } else { return ‘及格‘; } } }

?