Vue学习系列（三）：Vue的插值表达式v-text和v-html

最新推荐文章于 2024-05-29 13:57:32 发布

次时代小羊

最新推荐文章于 2024-05-29 13:57:32 发布

阅读量584

点赞数 1

分类专栏：前端文章标签： vue js javascript

本文链接：https://blog.csdn.net/qq_45193304/article/details/106591987

版权

前端专栏收录该内容

35 篇文章 2 订阅

订阅专栏

Vue学习系列：
上一篇：Vue学习系列（二）：Vue的第一个实例

在Vue中，数据绑定最常见的形式就是使用 {{…}}（双大括号）的文本插值。
除了{{……}}这种表达方式，我们还可以通过v-text的方式来进行数据渲染，v-text的数据渲染和{{……}}的数据渲染结果是一样的。
除了这种渲染文本的方式，Vue还提供v-html的文本渲染方式，该方式会将文本值按照HTML语言进行处理，然后进行数据渲染。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
		  <h1>{{ message }}</h1>
		  <h1 v-text="todo"></h1>
		  <h1 v-text="red"><h1>
		  <h1 v-html="red"></h1>
		</div>
	</body>
	<script>
		const app = new Vue({
		  el: '#app',
		  data: {
		    message: 'Hello,Vue',
			todo: '我今天去图书馆学习了',
			red: '<text style="color:red;">红色</text>'
		  }
		})
	</script>
</html>