Vue中数据代理
模拟Vue中数据代理
let number = 20
let person = {
name: '小辰',
sex: '男'
}
//value和get作用相同只能用一个,writable与set同理
Object.defineProperty(person,'age',{
// value: 20, //设置age的值
enumerable: true, //控制属性是否可以枚举,默认false
// writable: true, //控制属性是否可以被修改,默认false
configurable: true, //控制属性是否可以被删除,默认false
//当有人读取person的age属性时,get函数就会被调用,且返回值就是age值
get(){
console.log('有人读取age属性了')
return number
},
//当有人修改person的age属性时,set函数就会被调用,且会收到修改的具体值
set(value){
console.log('有人修改了age属性,且值为',value)
number = value
}
})
Vue中单向与双向数据绑定
- 单向数据绑定(v-bind:):数据只能从data流向页面。简写":"
- 双向数据绑定(v-model:):数据能从data流向页面,也能从页面流向data;一般都用在表单元素上。简写"v-model="