标签:内容 isp 的区别 而且 temp center splay 16px 不可
vue条件渲染
v-if指令用于条件的渲染一块内容,当指令的表达式返回true时,内容才会被渲染
如果想切换多个元素,可以使用<template>元素当作不可见的包裹元素。并在上面使用v-if,最终的渲染结果不包含<template>元素。
使用 v-else
指令来表示 v-if
的“else 块”:v-else
元素必须紧跟在带 v-if
或者 v-else-if
的元素的后面,否则它将不会被识别。
v-else-if
,顾名思义,充当 v-if
的“else-if 块”,可以连续使用:类似于 v-else
,v-else-if
也必须紧跟在带 v-if
或者 v-else-if
的元素之后。
Vue 会尽可能高效地渲染元素,通常会复用已有元素而不是从头开始渲染。当你使用v-if的内容中有复用的,也有不应该复用的元素,可以需添加一个具有唯一值的 key
属性,这样就不会再复用该元素,这两个元素是相互独立。
用于根据条件展示元素的选项是 v-show
指令,带有v-show的元素始终会被渲染并保留在 DOM 中。v-show
只是简单地切换元素的 CSS 属性 display,
当返回值为true,那么元素的display:true。(注意,v-show
不支持 <template>
元素,也不支持 v-else
。)
相同点:两者都可以控制一个元素的显示与否。
不同点:
2.编译条件:v-if是惰性的,如果初始条件为假,则什么也不做,不会去渲染该元素;只有在条件第一次变为真时才开始局部编译; v-show是在不管初始条件是什么,都被编译,然后被缓存,而且DOM元素保留,只是简单的基于css进行切换;即v-if中当为true才会被加载渲染,为false不加载。v-show不管为true或flase,都会加载渲染
v-show
较好;如果在运行时条件很少改变,当只需要一次显示或隐藏,则使用 v-if
较好。
标签:内容 isp 的区别 而且 temp center splay 16px 不可
原文地址:https://www.cnblogs.com/huronghua/p/12056292.html