说说 Vue.js 中的 v-once 指令
2018-11-17 本文已影响25人
deniro
被定义了 v-once 指令的元素或组件(包括元素或组件内的所有子孙节点)只能被渲染一次。首次渲染后,即使数据发生变化,也不会被重新渲染。一般用于静态内容展示。
html:
<div id="app">
<div v-once>
{{content}}
</div>
</div>
js:
<script>
var app = new Vue({
el: '#app',
data: {
content:'格陵兰岛冰下疑现巨大陨石坑 或与灭绝理论有关'
}
});
app.content='显卡第一利器升级:AMD新卡到位';
</script>
输出结果(demo):
格陵兰岛冰下疑现巨大陨石坑 或与灭绝理论有关
这里虽然使用了 app.content 重新设置了内容,但并没有生效,因为我们使用了 v-once 指令。
v-once 指令除了用于展示静态内容,也可能在需要进一步优化性能时用到它哦O(∩_∩)O~