1. 作用
两类指令，都是用来控制元素的显示与隐藏的
2. v-if
- 语法：v-if="表达式"，表达式值为 true，显示；false，隐藏
- 其它：可以配合 v-else-if / v-else 进行链式调用条件判断
- 原理：基于条件判断，来控制创建或移除元素节点（条件渲染）
- 场景：要么显示，要么不显示，不频繁切换的场景
3. v-show
- 语法：v-show="表达式"，表达式值为 true，显示；false，隐藏
- 原理：基于CSS样式display来控制显示与隐藏
- 场景：频繁切换显示隐藏的场景
4. 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>
</head>
<body>
<div id="app">
手链价格为: <span v-if="customer.level >= 0 && customer.level <= 1">9.9</span>
<span v-else-if="customer.level >= 2 && customer.level <= 4">19.9</span>
<span v-else>29.9</span>
<br>
手链价格为: <span v-show="customer.level >= 0 && customer.level <= 1">9.9</span>
<span v-show="customer.level >= 2 && customer.level <= 4">19.9</span>
<span v-show="customer.level >=5">29.9</span>
</div>
<script type="module">
//导入vue模块
import { createApp} from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
//创建vue应用实例
createApp({
data() {
return {
customer:{
name: "张三",
level: 1
}
}
}
}).mount("#app")//控制html元素
</script>
</body>
</html>笔记参考
