Vue.js v-if
🌙
手机阅读
本文目录结构
v-if
- 预期：
any
用法
根据表达式的值的 truthiness 来有条件地渲染元素。
在切换时元素及它的数据绑定 / 组件被销毁并重建。如果元素是 <template> ，将提出它的内容作为条件块。
当条件变化时该指令触发过渡效果。
当和
v-if一起使用时，v-for的优先级比v-if更高。详见列表渲染教程
参考
用法
条件判断使用 v-if 指令：
随机生成一个数字，判断是否大于 0.5，然后输出对应信息：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
<div v-if="Math.random() > 0.5">
大于5
</div>
<div v-else>
小于5
</div>
</div>
<script>
new Vue({
el: '#app'
})
</script>
</body>
</html>
另一种写法
<div id="app">
<div v-if="isShow">條正成立</div>
<div v-else>條件不成立</div>
</div>
var vm = new Vue({
el: '#app',
delimiters: ['${', '}'],
data: {
isShow: true
}
});
又一个用法
<div id="app">
<div v-if="type === A">A</div>
<div v-else-if="type === B">B</div>
<div v-else>C</div>
</div>
var vm = new Vue({
el: '#app',
delimiters: ['${', '}'],
data: {
type: "B"
}
});
注意：v-if 可以配合 v-else 使用，也可以单独使用 。当配合 v-else 使用时，加有 v-else 的标签要紧跟加有 v-if 的标签之后，中间如果穿插其他标签，v-else 将永远不会显示出来，并会报错！
如果 v-if 后面跟的是布尔值，而非变量语句的时候，可以根据布尔值真假判断显示和不显示 ，
舍弃 v-else 用 v-if=“flag” 配合 v-if="!flag"来解决中间不可以穿插其他标签的问题，可见 v-if 配合 v-else 使用非常有局限性！
官网介绍的 v-if
v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。
v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。
相比之下，v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。
一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。
因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。
