码迷,mamicode.com
首页 > 其他好文 > 详细

vue条件渲染

时间:2019-12-17 20:51:23      阅读:73      评论:0      收藏:0      [点我收藏+]

标签:内容   isp   的区别   而且   temp   center   splay   16px   不可   

vue条件渲染

一、v-if

v-if指令用于条件的渲染一块内容,当指令的表达式返回true时,内容才会被渲染


如果想切换多个元素,可以使用<template>元素当作不可见的包裹元素。并在上面使用v-if,最终的渲染结果不包含<template>元素。

二、v-else、v-else-if

使用 v-else 指令来表示 v-if 的“else 块”:v-else 元素必须紧跟在带 v-if 或者 v-else-if 的元素的后面,否则它将不会被识别。

v-else-if,顾名思义,充当 v-if 的“else-if 块”,可以连续使用:类似于 v-elsev-else-if 也必须紧跟在带 v-if 或者 v-else-if的元素之后。

三、用key管理可复用的元素

Vue 会尽可能高效地渲染元素,通常会复用已有元素而不是从头开始渲染。当你使用v-if的内容中有复用的,也有不应该复用的元素,可以需添加一个具有唯一值的 key 属性,这样就不会再复用该元素,这两个元素是相互独立。

四、v-show

用于根据条件展示元素的选项是 v-show 指令,带有v-show的元素始终会被渲染并保留在 DOM 中。v-show 只是简单地切换元素的 CSS 属性 display,

当返回值为true,那么元素的display:true。(注意,v-show 不支持 <template> 元素,也不支持 v-else。)

五、v-if和v-show的区别(vue小白面试常问问题)

相同点:两者都可以控制一个元素的显示与否。

不同点:

1. 控制显示的方法不同:v-if是动态的向DOM树内添加或者删除DOM元素;v-show是通过设置DOM元素的display样式属性控制显隐;

2.编译条件:v-if是惰性的,如果初始条件为假,则什么也不做,不会去渲染该元素;只有在条件第一次变为真时才开始局部编译; v-show是在不管初始条件是什么,都被编译,然后被缓存,而且DOM元素保留,只是简单的基于css进行切换;即v-if中当为true才会被加载渲染,为false不加载。v-show不管为true或flase,都会加载渲染

3.性能消耗:v-if有更高的切换消耗;v-show有更高的初始渲染消耗;
4.使用场景:因此,如果需要非常频繁地切换,则使用 v-show 较好;如果在运行时条件很少改变,当只需要一次显示或隐藏,则使用 v-if 较好。

 

 

 

 

 

vue条件渲染

标签:内容   isp   的区别   而且   temp   center   splay   16px   不可   

原文地址:https://www.cnblogs.com/huronghua/p/12056292.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!