前言
在 Vue.js 中，指令是带有 v- 前缀的特殊属性，不同属性对应不同的功能。通过学习不同的指令，我们能够灵活应对多种业务场景的需求。本章详细讲解了一些基本的 Vue 指令，包括 v-text、v-html、v-show、v-if、v-else指令。
一、v-text指令
①作用：更新元素的文本内容
②语法：v-text="文本内容"
③注意事项：v-text 直接操作元素的 textContent 属性，会将元素内的所有文本内容替换为绑定的值，而不保留原来已经存在的文本内容或其他子元素。使用差值表达式{{}}可以替换指定内容。
【示例】
代码语言：html复制<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>v-text指令</title>
</head>
<!-- v-text指令的作用：更新元素的文本内容 -->
<body>
<div id="app">
<!-- v-text指令会替换<h2>元素原本的文本内容 -->
<!-- 内部支持写表达式 使用 符号来进行字符串的拼接操作-->
<h2 v-text="message '!'">深圳</h2>
<h2 v-text="info '!'">深圳</h2>
<!-- 默认写法会替换全部内容,使用差值表达式{{}}可以替换指定内容 -->
<h2>{{ message '!'}}深圳</h2>
</div>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el:"#app",
data:{
message:"Hello",
info:"World"
}
})
</script>
</body>
</html>运行结果：
二、v-html指令
①作用：更新元素的 innerHTML，可插入 HTML 内容
②语法：v-html = " 表达式 "
【示例】
插值表达式并不具备解析标签的能力
差值表达式{{}}会将数据解释为纯文本，而不是 HTML。
若想插入 HTML，需要使用 v-html 指令。
点击“Vue 官网”即可跳转至 Vue 的官方网站
解析文本使用v-text 解析html结构使用v-html
三、v-show指令
①作用：基于表达式值的真假性来改变元素的可见性
②语法：v-show = "表达式"
（表达式值为true则显示，值为false则隐藏）
③原理：切换元素的 display 属性控制显示隐藏
④场景：频繁切换显示隐藏的场景
【示例】
表达式值为true时，元素正常显示。
代码语言：html复制<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>v-show指令</title>
<style>
.box {
width: 200px;
height: 100px;
line-height: 100px;
margin: 10px;
border: 3px solid #000;
text-align: center;
border-radius: 5px;
box-shadow: 2px 2px 2px #ccc;
}
</style>
</head>
<body>
<div id="app">
<div v-show=flag class="box">我是v-show控制的盒子</div>
</div>
<script src="./vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
flag: true
}
})
</script>
</body>
</html>运行结果：
表达式值为false时，元素的 display 属性会被设置为 none，从而使该元素隐藏。
代码语言：html复制<script>
const app = new Vue({
el: '#app',
data: {
flag: true
}
})
</script>运行结果：
四、v-if指令
①作用：基于表达式值的真假性，来条件性地渲染元素或者模板片段。
②语法： v-if = "表达式"
（表达式值为true则显示，值为false则隐藏）
③原理：基于条件判断创建或移除元素节点
④场景：要么显示，要么隐藏，不频繁切换的场景
【示例】
表达式值为true时：
代码语言：html复制<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>v-if指令</title>
<style>
.box {
width: 200px;
height: 100px;
line-height: 100px;
margin: 10px;
border: 3px solid #000;
text-align: center;
border-radius: 5px;
box-shadow: 2px 2px 2px #ccc;
}
</style>
</head>
<body>
<div id="app">
<div v-if=flag class="box">我是v-if控制的盒子</div>
</div>
<script src="./vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
flag: true
}
})
</script>
</body>
</html>运行结果：
表达式值为false时：
代码语言：html复制<script>
const app = new Vue({
el: '#app',
data: {
flag: true
}
})
</script>运行结果：
v-show与v-if的主要区别：
v-show仅仅切换 display 属性，所以切换速度快，但在 DOM 中总是存在该元素，只是改变了样式。使用简单、开销小，适合频繁切换显示的场景。v-if则是根据条件动态地添加或移除 DOM 元素。在条件为 false 时，元素会被完全移除，适合不经常切换显示的情况，但切换相对较慢，因为每次都要进行 DOM 操作。
五、v-else指令
①作用：辅助 v-if 进行判断渲染
②语法： v-else"
③注意事项： 需紧挨着 v-if 一起使用
【示例】
代码语言：html复制 <div id="app">
<p v-if="gender==1">性别：男</p>
<p v-else>性别：女</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
gender:1
}
})
</script>
</body>运行结果：
将<p v-if="gender==1">性别：男</p>注释掉后：
<div id="app">
<!-- <p v-if="gender==1">性别：男</p> -->
<p v-else>性别：女</p>
</div>运行结果：
每个 v-else 都应该紧跟着一个对应的 v-if 或 v-else-if，否则就会报错，提示 v-else 没有对应的 v-if。
六、v-else-if指令
①作用：辅助 v-if 进行判断渲染
②语法： v-else-if = "表达式"
【示例】
代码语言：html复制<body>
<div id="app">
<p v-if="gender==1">性别：男</p>
<p v-else>性别：女</p>
<hr>
<p v-if="score>=90">成绩评定A：奖励电脑一台</p>
<p v-else-if="score>=90">成绩评定B：奖励周末郊游</p>
<p v-else-if="score>=90">成绩评定C：奖励零食礼包</p>
<p v-else="score>=90">成绩评定D：惩罚一周不能玩手机</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
gender:1,
score:88
}
})
</script>
</body>运行结果：
