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