Vue指令v-once

正常情况下，如果改变data里面的属性值，属性值会发生统一改变。代码如下：

   <div id="app">

       <h1>{{name}}</h1>

       <p>{{sayName()}}</p>

   </div>

       <script>

              var vm=new Vue({

                     el:'#app',

                     data:{

                            name:"这是第一次的值"

                     },

                     methods:{

                            sayName:function(){

                                   this.name="这是第二次的值";

                                   return this.name;

                            }

                     }

              })

       </script>

执行结果如下：

但是有的时候，我们希望当数据发生改变时，某些插值处的值不会发生改变，就要使用到v-once。v-once只进行一次性的插值，随后数据发生改变时，插值处的内容不会发生改变，代码如下：

   <div id="app">

       <h1 v-once>{{name}}</h1>

       <p>{{sayName()}} </p>

   </div>

       <script>

              var vm=new Vue({

                     el:'#app',

                     data:{

                            name:"这是第一次的值"

                     },

                     methods:{

                            sayName:function(){

                                   this.name="这是第二次的值";

                                   return this.name;

                            }

                     }

              })

       </script>

执行结果如下：