一. v-if
在字符串模板中,如Handlebars ，我们得像这样写一个条件块
在vue.js使用v-if实现同样的功能
# 在中配合v-if条件渲染一整组中配合v-if条件渲染一整组 <template> 中配合 v-if条件渲染一整组
<template v-if="ok">
<p>哈哈哈哈</p>
<h1>我要优秀</h1>
</template>
最终渲染结果不会包含<template>元素# 你可以使用v-else指令来表示v-if的“else 块”v-else元素必须紧跟在v-if或者v-else-if元素的后面——否则它将不会被识别。
# v-else-if
2.1.0 新增
v-else-if，顾名思义，充当v-if的“else-if 块”。可以链式地使用多次：
如果两个元素不需要服用,独立的
没有添加key值的标签仍然会被高效服用
如上例的<lable>
二. v-show
根据条件展示的内容,类似于v-if
<p v-show="ok>Hello!!! </p>
v-show的不同处在于该标签会一直存在于DOM中并被渲染,只是根据条件判断是否显示,
切换display属性的值
注意: v-show不支持<template>和v-else语法
三.v-ifvsv-show
v-if是“真正的”条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。
一般来说，v-if有更高的切换开销，而v-show有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用v-show较好；如果在运行时条件不太可能改变，则使用v-if较好。
四.v-if与v-for一起使用
v-for具有比v-if更高的优先级。
网友评论