v-show 和 v-if 简介：
1. v-show
语法: v-show="布尔值" (true显示, false隐藏)
原理: 实质是在控制元素的 css 样式, `display: none;`
2. v-if
语法: v-if="布尔值" (true显示, false隐藏)
原理: 实质是在动态的创建 或者 删除元素节点
应用场景:
1. 如果是频繁的切换显示隐藏, 用 v-show
(v-show, 只是控制css样式，而v-if, 频繁切换会大量的创建和删除元素, 消耗性能)
2. 如果是不用频繁切换, 要么显示, 要么隐藏的情况, 适合于用 v-if
(v-if 是惰性的, 如果初始值为 false, 那么这些元素就直接不创建了, 节省一些初始渲染开销)
<template>
<div>
<!-- 控制元素的 css 样式, display: none -->
<h1 v-show="showContent">hello world</h1>
<!-- 动态删除元素节点 -->
<h1 v-if="showContent">hello world</h1>
</div>
</template>
<script>
export default {
// data中声明的变量
data() {
return {
showContent: false,
}
}
}
</script>
<style>
</style>若多个条件，采用v-if和v-else-if和v-else来控制要显示隐藏的内容
<template>
<div>
<!-- 多个条件，采用v-if和v-else-if和v-else -->
<!-- 多个条件之间，不能插入别的标签 -->
<h1>去社区送礼品</h1>
<p>不同年龄段，送不同的礼品</p>
<p v-if="age < 18">小朋友：棒棒糖</p>
<p v-else-if="age < 50">青年：快乐水</p>
<p v-else-if="age < 60">中年：假发</p>
<p v-else>老年：脑白金</p>
<p>年龄：{{ age }}</p>
<button @click="age += 10">长大10岁</button>
</div>
</template>
<script>
export default {
data() {
return {
age: 8,
};
}
}
</script>
<style>
</style>小案例：
需求：点击按钮button变量count值自增，当count大于3，显示内容“恭喜你晋级了”
<template>
<div>
<p v-show="showWorld">hello world</p>
<p v-if="showWorld">hello world</p>
<button @click="showWorld = !showWorld">显示/隐藏世界</button>
<h1>{{ count }}</h1>
<!-- 当count大于3，显示恭喜你晋级了 -->
<p v-show="count > 3">恭喜你，晋级了！</p>
<button @click="count++">升级</button>
<!-- 根据年龄，显示不同文案 -->
<!-- 小于18 -->
<h1 v-if="age < 18">少年</h1>
<!-- 18 - 30 -->
<h1 v-else-if="age < 30">青年</h1>
<!-- 30 - 60 -->
<h1 v-else-if="age < 60">中年</h1>
<!-- 大于 60 -->
<h1 v-else>老年</h1>
<h1>年龄：{{ age }}</h1>
<button @click="age += 10">长大10岁</button>
</div>
</template>
<script>
export default {
data() {
return {
showWorld: true,
count: 0,
age: 8,
}
}
}
</script>
<style>
</style>