<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue挂载点与变量渲染</title>
<script type="text/javascript" src="Vue.js"></script>
</head>
<body>
// 挂载点
<div id="box">
// 使用{{变量名}},插值
<p>{{msg1}}</p>
// 使用模板指令：v-text,通常是写到标签的属性中
<p v-text="msg1"></p>
// 使用模板指令：v-html,可以将字符串中的html代码解析出来
<p v-html="msg2"></p>
</div>
<script type="text/javascript">
new Vue({
el:'#box',// 挂载到box上
// 数据模型
data:{
msg1:'Vue.js挂载点与数据渲染',
msg2:'<h3 style="color:red;">渲染html代码</h3>'
}
});
</script>
</body>
</html>
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
Collection
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
