一、模板语法
文本:{{message}} vue数据绑定最常见的形式,只要数据(data)对象message的值发生变化,插值处内容就会随之更新
如果想让内容只渲染一次,可以使用v-once指令:<div v-once>{{msg}}</div>
,当msg的值改变,插值处的内容不会改变
测试可以在浏览器打开控制台,输入app.msg="nihao"来测试是否会改变
原始html: 使用v-html指令,可以将带标签的文本插入到页面
例:
<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/vue.js" type="text/javascript"></script>
</head>
<body>
<div id="app">
<div>
{{message}}
<div v-html="text"></div>
</div>
</div>
<script>
var app = new Vue({
el:"#app",
data:{
message:"vue大神之旅",
text:"<h1>学好vue,前端我最牛</h1>"
}
});
</script>
</body>
</html>
QQ:732005030
扫码加微信