computed的 getter 和 setter

computed对象:里面的属性为计算属性,其中计算属性的方式有2种。

第一种:计算属性fullName为方法 fullName:function(){return ...}

第二种:计算属性fullName为对象,此时此对象有2个方法,get与set方法

get方法:取值

set方法:此方法会传入一个值,即可以手动设置值,改变相关联的值,页面的数据会重新渲染。

<div id="app">
    {{fullName}}
</div>

<script>
    var vm = new Vue({
        el: '#app',
        data: {
            firstName: "peng",
            lastName: "yidong"
        },
        computed: {
            fullName: {
                get() {
                    return this.firstName + " " + this.lastName
                },
                set(value) {
                    var arr = value.split(" ")
                    this.firstName = arr[0]
                    this.lastName = arr[1]
                    console.log("set",value);
                }
            }
        }
    })
</script>
利用计算属性的 gettersetter 实现数据的双向绑定

   

<div id="example">
  <custom-input v-model="value"></custom-input>
  <p></p>
  value:{{ value }}
</div>

new Vue({
  el: '#example',

  data: () => ({
    value: '1'
  }),
 
  components: {
    CustomInput: {
      props: ['value'],
      template: `<input v-model="localValue" />`,
      computed: {
        localValue: {
          get() {
            return this.value
          },
          set(newValue) {
            this.$emit('input', newValue)
          }
        }
      }
    }
  }
})

 

上一篇:深究vue中computed顺序、watch顺序、响应次数


下一篇:电话号码查询系统实验报告