v-once
只渲染元素和组件一次。随后的重新渲染,元素/组件及其所有的子节点将被视为静态内容并跳过。这可以用于优化更新性能。例如:
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../../js/vue.js"></script>
</head>
<body>
<div id="app">
<p>原始值:{{msg}}</p>
<p>后来值:{{msg}}</p>
<input type="text" v-model="msg">
</div>
</body>
<script>
var vm=new Vue({
el:"#app",
data:{
msg:"wo"
}
})
</script>
</html>
结果如下:
输入框输入什么,原始值和后来值都跟着变,想要原始值不变,则添加v-once即可。
<p v-once>原始值:{{msg}}</p>
<p>后来值:{{msg}}</p>
<input type="text" v-model="msg">
结果如下:
通过使用 v-once 指令,你也能执行一次性地插值,当数据改变时,插值处的内容不会更新。但请留心这会影响到该节点上的其它数据绑定:
<span v-once>这个将不会改变: {{ msg }}</span>