v-text和v-html区别
v-text指令
官方文档传送门:API — Vue.js
作用:设置元素的文本 innerText, 如果元素有文本,则会覆盖现有的文本。
v-html指令
官方文档传送门:API — Vue.js
作用: 设置元素的innerHTM。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<!-- 导包 -->
<script src="./vue.js"></script>
</head>
<body>
<!-- HTML结构 -->
<div id="app">
<p v-text="msg">你是谁</p>
<p v-text="msg1">你是谁</p>
<p v-html="msg1">你是谁</p>
</div>
<script>
/* 创建vue实例 */
let app = new Vue({
//el:挂载点
el: '#app',
//data: 要渲染的数据
data: {
msg: '我是坤坤!',
msg1:'我是<h1>会唱跳rap的</h1>坤坤'
}
})
</script>
</body>
</html>
输出结果:
从输出结果可以看出,v-text和v-html都会覆盖原有的文本,而v-html还可以识别标签并编译,v-text只当成文本识别。
v-if和v-show区别
v-if指令
官网文档:API — Vue.js
根据条件渲染数据,本质是在动态的创建 或者 删除元素节点。
应用场景:如果是不用频繁切换, 要么显示, 要么隐藏的情况, 适合于用 v-if, v-if 是惰性的, 如果初始值为 false, 那么这些元素就直接不创建了, 节省一些初始渲染开销。
v-show指令
官网文档:API — Vue.js
本质是在控制元素的 css 样式,
display: none;
应用场景:如果是频繁的切换显示隐藏, 用 v-show,因为v-if, 频繁切换会大量的创建和删除元素, 消耗性能。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<!-- 导包 -->
<script src="./vue.js"></script>
</head>
<body>
<!-- HTML结构 -->
<div id="app">
<button @click="flag = !flag">按钮</button>
<p v-if="flag">v-if</p>
<p v-show="flag">v-show</p>
</div>
<script>
/* 创建vue实例 */
let app = new Vue({
//el:挂载点
el: '#app',
//data: 要渲染的数据
data: {
flag:'true'
}
})
</script>
</body>
</html>
页面右键检查,点击按钮可以发现二者的区别。