vue中计算属性中的set和get

 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

 <body>

     <div id="app">

         <p>初始值：{{name}}</p>

         <p>翻转值：{{reverseStr()}}</p>

         <p>计算属性翻转值：{{reverse}}</p>

         <button  @click="setSeverseStr()">点击调用set方法</button>

     </div>

     <script type="text/javascript" src="js/jquery.js" ></script>

     <script type="text/javascript" src="js/vue.js" ></script>

     <script>

         let vm=new Vue({

             el:'#app',

             data:{

                 name:'Rose Jack',

                 firstName:'小',

                 lastName:'明'

             },

             methods:{

                 reverseStr(){

                     return this.name.split(' ').reverse().join(' ');

                 },

                 setSeverseStr(){

                     this.reverse='xiao ming';

                 }

             },

             //计算属性

             computed:{

                 reverse:{

                     //get方法

                     get(){

                         //return this.name.split(' ').reverse().join(' ');

                         return this.firstName+' '+this.lastName;

                     },

                     //set方法

                     set(str){

                         let nameArr=str.split(' ');

                         this.firstName=nameArr[];

                         this.lastName=nameArr[];

                         alert(this.firstName);

                         alert(this.lastName);

                     }

                 }

             }

         })

     </script>

 </body>

点击之后：

computed vs methods

我们可以使用 methods 来替代 computed，效果上两个都是一样的，但是 computed 是基于它的依赖缓存，只有相关依赖发生改变时才会重新取值。

而使用 methods ，在重新渲染的时候，函数总会重新调用执行。

巴特西

vue中计算属性中的set和get

computed vs methods

最新文章

热门文章