Vue v-once 组件只渲染一次

Vue About 738 words

作用

组件首次渲染后，之后不再渲染。

示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./lib/vue@2.6.12.js"></script>
</head>
<body>
<div id="app">

    <div>{{ count }}</div>

    <div v-once>v-once: {{ count }}</div>

    <button @click="clk">btn</button>


</div>

<script>
    const vm = new Vue({
        el: "#app",
        data: {
            count: 0
        },
        methods: {
            clk() {
                this.count++;
            }
        }
    });
</script>

</body>
</html>

点击按钮10次，输出：

10
v-once: 0

参考

https://cn.vuejs.org/v2/api/#v-once

Views: 1,468 · Posted: 2022-12-31

———— END ————

Give me a Star, Thanks:)

https://github.com/fendoudebb/LiteNote

扫描下方二维码关注公众号和小程序↓↓↓