computer:计算属性

get:获取属性。computer有2个属性,get和set,一般我们都是默认使用get,就像下面的代码

<template>
  <div>
    {{nameNew}}  //  => '哈哈哈哈'
  </div>
</template>
<script>
export default {
  data(){
    return {
      name:'哈哈哈哈',
    }
  },
  computed: {
    nameNew :function(){
      return this.name
    }
  }
}

set:只有当computed监测的值变化的时候,也就是我下面例子中的name变化的时候,set才回被调用 (想要修改computer的值,就必须设置set方法)

<template>
  <div>
    {{nameNew}}-{{name}}
    <button @click="edit">nameNew</button>
  </div>
</template>
<script>
export default {
  data(){
    return {
      name:'哈哈哈',
    }
  },
  computed:{
    nameNew :{
      get: function () {
        console.log('调用了getter属性')
        return this.name
      },
      set: function (newValue) {
        console.log('调用了settter属性')
        this.name = newValue
      }
    }
  },
  methods:{
    edit(){
      this.nameNew= '变'
    }
  }
}
</script>

 

Logo

前往低代码交流专区

更多推荐