欢迎大家订阅【Vue2+Vue3】入门到实践 专栏,开启你的 Vue 学习之旅!
前言
在 Vue.js 中,指令是带有 v- 前缀的特殊属性,不同属性对应不同的功能。通过学习不同的指令,我们能够灵活应对多种业务场景的需求。本章详细讲解了一些基本的 Vue 指令,包括 v-text、v-html、v-show、v-if、v-else 以及 v-else-if 指令。
本篇文章参考黑马程序员
一、v-text指令
①作用:更新元素的文本内容
②语法:v-text="文本内容"
③注意事项:v-text 直接操作元素的 textContent 属性,会将元素内的所有文本内容替换为绑定的值,而不保留原来已经存在的文本内容或其他子元素。使用差值表达式{{}}可以替换指定内容。
【示例】
<!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时,元素正常显示。
<!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,从而使该元素隐藏。
<script>
const app = new Vue({
el: '#app',
data: {
flag: true
}
})
</script>
运行结果:
四、v-if指令
①作用:基于表达式值的真假性,来条件性地渲染元素或者模板片段。
②语法: v-if = "表达式"
(表达式值为true则显示,值为false则隐藏)
③原理:基于条件判断创建或移除元素节点
④场景:要么显示,要么隐藏,不频繁切换的场景
【示例】
表达式值为true时:
<!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时:
<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 一起使用
【示例】
<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 = "表达式"
【示例】
<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>