zoukankan      html  css  js  c++  java
  • vuejs计算属性getter和setter

    当页面获取某个数据的时候,先会在data里面找,找不到就会去计算属性里面找,在计算属性里面,获取的时候会自动去执行get方法
    <div id='app'>
      {{fullName}}
    </div>
    
    <script>
      var vm = new Vue({
        el:'#app',
        data:{
          firstName: 'Mike',
          lastName: 'Lee'
         },
        computed:{
          fullName:{
            get:function(){
              return this.firstName + this.lastName
            }
          }
        }
      })
    </script>
    既然可以写get,自然可以写与之对应的set
    <div id='app'>
      {{fullName}}
    </div>
    
    <script>
      var vm = new Vue({
        el:'#app',
        data:{
          firstName: 'Mike',
          lastName: 'Lee'
        },
        computed:{
          fullName:{
            get:function(){
              return this.firstName + this.lastName
            },
            set:function(value){
              var arr = value.split(' ');
              this.firstName = arr[0];
              this.lastName = arr[1];
            }
          }
        }
      })
    </script>
    当控制台去设置fullName值的时候,会自动执行set方法,比如vm.fullName='Mike Wang',fullName被设置,fullname会打散,重新改变firstName和lastName的值
  • 相关阅读:
    CCF NOI1121 逆波兰表达式
    Vijos P1217 乒乓球【模拟+输入输出】
    Vijos P1304 回文数【回文+进制】
    NUC1041 数字三角形【DP】
    CCF NOI1070 汉诺塔游戏
    CCF NOI1069 分解因数
    CCF NOI1149 N皇后问题
    CCF NOI1153 素数环
    CCF NOI1170 质因数分解
    POJ NOI MATH-7832 最接近的分数
  • 原文地址:https://www.cnblogs.com/wzndkj/p/9616665.html
Copyright © 2011-2022 走看看