标签：set computed get value getter fullName 属性 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>

利用计算属性的 getter 和 setter 实现数据的双向绑定

<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)
          }
        }
      }
    }
  }
})

标签：set,computed,get,value,getter,fullName,属性,setter
来源： https://www.cnblogs.com/manhuai/p/14535228.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。