基本指令v-once

最新推荐文章于 2025-06-14 18:46:40 发布

原创最新推荐文章于 2025-06-14 18:46:40 发布 · 8.1k 阅读

4 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

vue 专栏收录该内容

53 篇文章

订阅专栏

基本指令v-once

v-once 也是一个不需要表达式的指令，作用是定义它的元素或组件只渲染一次，包括元素或组件的所有子节点。首次渲染后，不再随数据的变化重新渲染，将被视为静态内容
下面示例，原本是每一秒展示动态随机数，但是因为使用v-once 首次渲染后，就不在改变数字了

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app" >
    
       <span v-once>{{message}}</span>
    </div>
    <script src="vue.js">

    </script>
    <script>
         var app = new Vue({
             el:"#app",
             data:{message:0},
             mounted()
            {
                _this = this;
                // 这样才可以指向vue实例
                this.timer = setInterval(function(){_this.date = new Date();_this.message = Math.random() },1000);

            }
         })
    </script>
    <!-- 
        v-once 也是一个不需要表达式的指令，作用是定义它的元素或组件只渲染一次，包括元素或 组件的所有子节点。首次渲染后，不再随数据的变化重新渲染，将被视为静态内容 
        原本是每一秒展示动态随机数，但是因为使用v-once 首次渲染后，就不在改变数字了
    -->
</body>
</html>