Version: Next
2. v-text和v-html
2.1 v-text
v-text用来获取data中的数据，将数据以文本的形式，渲染到指定标签内部，类似于JavaScript中的innerHTML
<span v-text="message"></span>
使用v-text无需写{{}}，可以直接获取data数据
在v-text中也可以使用表达式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="app">
<span>{{message}} </span>
<span v-text="message"></span>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript">
const app = new Vue({
el: "#app",
data: {
message: "abc"
}
})
</script>
</body>
</html>
v-text和{ {表达式} }的区别：
- 使用
v-text取值，会将标签中原有的数据覆盖；使用{ {表达式} }插值表达式的形式取值。不会覆盖标签中原有的数据- 使用
v-text可以避免在网络环境较差的环境下，出现插值闪烁 插值闪烁：在数据未加载完毕前，用户可以看到插值表达式{ {表达式} }
2.2 v-html
v-html用来获取data中的数据，将数据中含有的html标签先解析，再渲染到指定标签内部。类似于JavaScript中的innerHTML
v-html也会覆盖原有标签中的内容
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="app">
<span v-html="message"></span><br>
<span v-text="message">哈哈哈</span>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript">
const app = new Vue({
el: "#app",
data: {
message: "<a href='#'>一个超链接</a>"
}
})
</script>
</body>
</html>
一个超链接
<a href='#'>一个超链接</a>