阅读背景:

vue 02-上计算属性、样式的操作,指令(含自定义,全局和局部)

来源:互联网 

计算属性: 是一个函数,所依赖的元数据变化时,就会再次执行

    典型案例todolist

        computed:{
            计算属性: function(){return 返回值}        使用: {{计算属性}}
        }

        与method的区别: 方法会每次调用,计算属性不会
            计算属性的性能高: 适合做筛选,基于它们的响应式依赖进行缓存的
            方法:适合在列表渲染使用,强制渲染执行


        计算属性:计算属性也可以是个对象
            读取了属性 -> get:fn
            修改了属性 -> set:fn

<body>
  
  <div id="example-5">
    {{ cptStr }}
  </div>

  <script>
    let vm = new Vue({
      el: '#example-5',
      data: {
        str: 'i love you',
      },
      computed:{
        /* cptStr(){
          return this.str.split(' ').reverse().join(' ')
        } */
        cptStr:{
          get: function(){
            console.log('get')
            return this.str.split(' ').reverse().join(' ')
          },
          
          set: function(val){
            this.str = val;
            console.log('set')
          }
        }
      }
    })
  </script>

</body>
在控制台输入vm.str='123'页面会立刻改123.即set发生改变    典型案例



你的当前访问异常,请进行认证后继续阅读剩余内容。

分享到: