Vue学习系列(三):Vue的插值表达式v-text和v-html

Vue学习系列:
上一篇:Vue学习系列(二):Vue的第一个实例

  • 在Vue中,数据绑定最常见的形式就是使用 {{…}}(双大括号)的文本插值。

  • 除了{{……}}这种表达方式,我们还可以通过v-text的方式来进行数据渲染,v-text的数据渲染和{{……}}的数据渲染结果是一样的。

  • 除了这种渲染文本的方式,Vue还提供v-html的文本渲染方式,该方式会将文本值按照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: '红色'
		  }
		})
	script>
html>

浏览器页面显示结果:

Vue学习系列(三):Vue的插值表达式v-text和v-html_第1张图片

你可能感兴趣的:(前端,vue,js,javascript)