首页 > 其他 > 详细

vue指令之v-once

时间:2021-09-13 12:31:28      阅读:29      评论:0      收藏:0      [点我收藏+]

v-once的作用是只会渲染对应元素一次,数据更新不会引起视图的更新,目的是为了优化页面的性能。

 1    <div id="app" v-clock>
 2         <h2 v-once>{{a}}</h2>
 3         <button @click="add">按我加1</button>
 4         <button @click="minus">按我减1</button>
 5     </div>
 6     <script src = "js/vue.js"></script>
 7     <script>
 8         var vue = new Vue({
 9             el: "#app",
10             data: {
11                 a: 100
12             },
13             // 事件方法
14             methods:{
15                 add() {
16                        //点击使a加1
17                     this.a ++
18                     console.log(this.a)
19                 },
20                 minus() {
21                //点击使a减1
22                     this.a --
23                     console.log(this.a)
24                 }
25             }
26         })
27     </script>

此时我们可以在浏览器中看到:

技术分享图片

 

 页面并无更新渲染但数据改变了。

vue指令之v-once

原文:https://www.cnblogs.com/keyeking/p/15260631.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!