vue.js一个简单例子的基础说明系列-[第3个例子]-----vue如何模板语法渲染数据

295 阅读1分钟

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>vue.js一个简单例子的基础说明系列-[第1个例子]----vue如何模板语法渲染数据</title>
	</head>

	<body>
		<div id="app">
			<p>{{message2}}</p>  <!--使用 {{...}}(双大括号)的方式把属性的值渲染到html里-->
			<div v-html="message1"></div>  <!--使用 v-html 指令来把 html 代码 渲染到html里-->
		</div>

		<script src="js/vue.min.js" type="text/javascript" charset="utf-8"></script>
		<script>
			new Vue({
				el: '#app',
				data: {
					message1: '<h1>菜鸟教程</h1>',
					message2: 'ok,i can do it'
				}
			})
		</script>
	</body>

</html>