1.内容渲染指令(v-html,v-text)
(1)v-text
使用语法:`<p v-text="uname">hello</p>`,意思是将 uame 值渲染到 p 标签中
(2)v-html
使用语法:`<p v-html="intro">hello</p>`,意思是将 intro 值渲染到 p 标签中
二者区别:v-text只会识别文本,v-html会识别标签
示例代码
<!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">
<p v-text="uname">hello</p>
<p v-html="intro">hello</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>
<script>
const app=new Vue({
el:'#app',
data:{
uname:'<h1>这里是v-text</h1>',
intro:'<h1>这里是v-html</h1>'
}
})
</script>
</body>
</html>
运行结果
2.条件渲染指令(v-show,v-if,v-else,v-else-if)
(1)v-show
语法: v-show = "表达式" 表达式值为 true 显示, false 隐藏
场景:频繁切换显示隐藏的场景
(2)v-if
语法: v-if= "表达式" 表达式值 true显示, false 隐藏
场景: 要么显示,要么隐藏,不频繁切换的场景
v-show和v-if区别:适用场景不同,v-show显示和隐藏节点,而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>
<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 v-if='flag' class="box">我是v-if控制的盒子</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>
<script>
const app=new Vue({
el:'#app',
data:{
flag:true
}
})
</script>
</body>
</html>
运行结果如下图所示
把代码修改
flag:false
运行结果
(图片可能不清晰,以下为放大图)
可以看出显示都为空白,但是经过调试发现v-show的盒子还存在,但是v-if节点已经被删除
(3)v-else和v-else-if
它们都是辅助v-if进行判断渲染,需要接着v-if进行使用
v-else-if后面接表达式,满足表达式则执行
v-else只要v-if和v-else-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">
<p v-if="gender==1">性别:男</p>
<p v-else>性别:女</p>
<hr>
<p v-if="score>=90">成绩评定A:奖励一台电脑</p>
<p v-else-if="score>=70">成绩判定B:奖励出去旅行一场</p>
<p v-else-if="score>=65">成绩判定C:奖励一包干脆面</p>
<p v-else>成绩判定D:安排去学习</p>
<hr>
<p v-if="score==100">暑假作业全免</p>
<p v-else-if="score>=80">免去语数英</p>
<p v-else-if="score>=60">免去小科作业</p>
<p v-else>不免</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>
<script>
const app=new Vue({
el:'#app',
data:{
gender:2,
score:60
}
})
</script>
</body>
</html>
运行结果