条件渲染：
- v-if
a. 写法
v-if="表达式"
v-else-if= "表达式"
v-else
b. 适用于频率切换比较低的场景
c. 特点：不展示的DOM元素直接被移除
d. 注意：v-if可以和v-else-if, v-else一起使用，但要求结构不能被打断
-
V-show
a. 写法：v-show="表达式"
b. 适用于频率切换较高的场景
c. 特点：不展示的DOM元素未被移除，仅仅是使用样式隐藏掉 -
备注：使用v-if时，元素可能无法获取，而使用v-show一定可以获取到。
新建文件【条件渲染.html】
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>条件渲染</title>
<style>
</style>
<!-- 引入Vue -->
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<!-- 准备好一个容器 -->
<div id="root">
<!--使用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>
<h2>当前的n值是：{{n}}</h2>
<button @click="n++">点击n+1</button>
<!-- 变化很频繁，使用v-show -->
<div v-show="n === 1">
Angular
</div>
<div v-show="n === 2">
React
</div>
<div v-show="n === 3">
Vue
</div>
<!-- 变化频率低，使用v-if -->
<!--使用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>
<hr>
<!-- v-if与template配合使用-->
<template v-if="n === 1">
<h2>你好</h2>
<h2>长沙</h2>
</template>
</div>
<!--阻止vue在启动时生成生产提示 -->
<script type="text/javascript">
Vue.config.productionTip=false
// 创建Vue实例
new Vue({
el:"#root",
data:{
name: "Hello World",
n:0,
},
methods:{
}
})
</script>
</body>
</html>
