数据绑定最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值：
<span>Message: {{ msg }}</span>
Mustache 标签将会被替代为对应数据对象上 msg 属性的值。无论何时，绑定的数据对象上 msg 属性发生了改变，插值处的内容都会更新。
通过使用 v-once 指令，你也能执行一次性地插值，当数据改变时，插值处的内容不会更新。但请留心这会影响到该节点上的其它数据绑定：
<span v-once>这个将不会改变: {{ msg }}</span>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="vue.js"></script>
</head>
<body>
<div id="app">Message: {{ msg }}</div>
<script type="text/javascript">
var vm = new Vue({
el: "#app",
data:{
msg: "Hello Vue!",
}
});
vm.msg = "Hello New Vue Info!";
</script>
<div id="app-1" v-once>Message: {{ Message }}</div>
<script type="text/javascript">
var app10 = new Vue({
el: "#app-1",
data:{
Message: "Hello Vue!",
}
});
app10.Message = "Hello New Vue Infos!";
</script>
</body>
</html>
页面渲染后结果：
Message: Hello New Vue Info!
Message: Hello Vue!
app10->Vue实例 加入v-once 后 app10.Message = "Hello New Vue Infos!"; 无法再次插值
发表评论 取消回复