vue指令：v-once 元素和组件只渲染一次，不会随着数据的改变而改变

左手的ㄟ右手 2023-10-01 09:32 19阅读 0赞

对容器使用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>
        <style>
            
        </style>
    </head>
    <body>
        <div id="app">
            <h2 v-once>{
       {a}}</h2>
            <button @click="add">按我加1</button>
            <button @click="minus">按我减1</button>
        </div>
        <script src = "js/vue.js"></script>
        <script>
            var vue = new Vue({
         
                el: "#app",
                data: {
         
                    a: 100
                },
                // 事件方法
                methods:{
         
                    add() {
         
                        this.a ++
                        console.log(this.a)
                    },
                    minus() {
         
                        this.a --
                        console.log(this.a)
                    }
                }
            })
        </script>
    </body>
    </html>

始终是初始状态的`100`：  
![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5a2m5Lqu57yW56iL5omL6K6w_size_20_color_FFFFFF_t_70_g_se_x_16]

[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5a2m5Lqu57yW56iL5omL6K6w_size_20_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/bf46c5d1e1b1480a808b420cad83c963.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5a2m5Lqu57yW56iL5omL6K6w,size_20,color_FFFFFF,t_70,g_se,x_16