Vue基础入门到项目实战教程(5) —— v-text 和 v-htm l指令

v-text 在标签中显示文本数据，数据对象中的数据会被原样输出，例如：

<span v-text="message"></span>
<!-- 简写方式 -->
<span>{{message}}</span>

在模板中输出真正的HTML，如果是使用 v-text 输出带标签的字符串的话，仅仅是想页面中输出带标签的HTML，但是不会对HTML代码进行解析，如果要解析HTML代码，就要使用 v-html 指令。例如：

<p v-text=“message”></p> <!-- 输出带有HTML标签的文本内容 -->
<p v-html="message"></p> <!-- 输出解析HTML代码后的内容 -->

<script type="text/javascript">
	var app = new Vue({
		el: '#app', //element
		data: {
			message: '<strong>Hello</strong> Vue!',
		}
	})
</script>

上面代码执行后，输出的结果为：

v-text 输出的结果是：<strong>Hello</strong> Vue!

v-html 输出的结果是：Hello Vue！

总结：

v-text 和 {{}} 表达式渲染数据，不解析标签；

v-html 不仅可以渲染数据，而且可以解析标签；