目录
1. v-text指令
- 作用:设置标签的文本值(textContent)
- 完整代码
<!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'>
<!-- 相当于textContent -->
<h2 v-text='message'></h2>
<h2 v-text='age'></h2>
<!-- 使用差值表达式替换部分内容 -->
<h2>{{message}}单身哦!</h2>
<h2 v-text='base'>这里不显示哦</h2>
<!-- 支持表达式 -->
<h2 v-text='base + "!"'>这里不显示哦</h2>
</div>
<!-- 开发环境版本,包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el:'#app',
data:{
message:'大家好,我是测试小白!',
age:'今年26岁',
base:'辽宁-大连'
}
})
</script>
</body>
</html>
2. v-html指令
- 作用:设置元素的innerHTML
- 完整代码
<!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'>
<!-- 文本时无区别 -->
<h2 v-html='mes'></h2>
<h2 v-text='mes'></h2>
<!-- html标签时有区别 -->
<h2 v-html='info'></h2>
<h2 v-text='info'></h2>
</div>
<!-- 开发环境版本,包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el:'#app',
data:{
mes:'大家好,我是测试小白!',
info:'<a href="https://blog.csdn.net/IT_heima">小白的博客</a>'
}
})
</script>
</body>
</html>
3. v-text 和 v-html 区别
- v-html中内容中有html结构会被解析为标签
- v-text指令无论内容是什么,只会解析为文本
- 解析文本使用v-text,需要解析html结构使用V-html