数据绑定最常见的形式就是使用“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!"; 无法再次插值
发表评论 取消回复