程序员

说说 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~

上一篇 下一篇

猜你喜欢

热点阅读