目录
- 一、v-show
- 二、v-if
- 2.1 基本使用
- 2.2 条件渲染分组
- 2.3 与 v-else-if、v-else 结合使用
- 三、v-if vs v-show
- 四、测试案例
本节条件渲染所涉及到的指令有：
v-showv-ifv-else-ifv-else
一、v-show
1. 用法：
- 语法:
v-show=" 表达式"，适用于切换频率较高的场景 <h2 v-show="false">欢迎来到：{{name}}</h2><h2 v-show="1===1">欢迎来到：{{name}}</h2>
<div id="root">
<h2 v-show="false">欢迎来到：{{name}}</h2>
<h2 v-show="1===1">欢迎来到：{{name}}</h2>
</div>
<script>
new Vue({
el:'#root',
data:{
name:'Vue',
n:0
}
})
</script>
2. 页面生成的DOM结构如下：
上述的截图中，我们可以看到v-show指令是通过设置display: none;来设置元素的可见性。
由此我们可以得出一个结论：带有 v-show 的元素始终会被渲染并保留在 DOM 中。v-show 只是简单地切换元素的 CSS property display。
3. 注意
v-show不支持<template>元素，也不支持v-else。
二、v-if
v-if 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 true值的时候被渲染。
2.1 基本使用
<h2 v-if="false">欢迎来到：{{name}}</h2>
<h2 v-if="1===1">欢迎来到：{{name}}</h2>
生成的页面的DOM结构如下所示，可以看到表达式的值为false的时候，元素不会渲染在页面中。
2.2 条件渲染分组
用法：在 <template> 元素上使用 v-if 条件渲染分组。
注意：template只能和v-if配合使用 ，不能和v-show配合
由于 v-if是一个指令，所以必须将它添加到一个元素上。但是如果想切换多个元素呢？此时可以把一个 <template> 元素当做不可见的包裹元素，并在上面使用 v-if。最终的渲染结果将不包含 <template> 元素。如下代码所示：
<template v-if="n===1">
<h3>V</h3>
<h3>U</h3>
<h3>E</h3>
</template>
2.3 与 v-else-if、v-else 结合使用
v-if可以和v-else-if、 v-else 一起使用， 但要求结构不能被打断，即用该指令的结构要挨在一起。
<div v-if="n===1">Angular</div>
<div v-else-if="n===2">React</div>
<div v-else-if="n===3">Vue</div>
<div v-else>好好学习，天天向上！</div>
三、v-if vs v-show
一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。
因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。
四、测试案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../lib/vue.min.js"></script>
</head>
<body>
<div id="root">
<h2>当前的n值是：{{n}}</h2>
<button @click="n++">点击n++</button>
<!-- 使用v-show做条件渲染 -->
<h2 v-show="false">欢迎来到：{{name}}</h2>
<h2 v-show="1===1">欢迎来到：{{name}}</h2>
<!-- 使用v-if做条件渲染 -->
<h2 v-if="false">欢迎来到：{{name}}</h2>
<h2 v-if="1===1">欢迎来到：{{name}}</h2>
<div v-show="n===1">Angular</div>
<div v-show="n===2">React</div>
<div v-show="n===3">Vue</div>
<div v-if="n===1">Angular(v-if)</div>
<div v-else-if="n===2">React</div>
<div v-else-if="n===3">Vue</div>
<div v-else>好好学习，天天向上！</div>
<!-- v-if和template配合使用 -->
<template v-if="n===1">
<h3>V</h3>
<h3>U</h3>
<h3>E</h3>
</template>
</div>
<script>
new Vue({
el:'#root',
data:{
name:'Vue',
n:0
},
methods: {
},
})
</script>
</body>
</html>
