收藏
<!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>
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
