(1)vue基础——1.4 数据绑定

1. Vue中有2种数据绑定的方式:

1.单向绑定(v-bind):数据只能从data流向页面。 2.双向绑定(v-model):数据不仅能从data流向页面,还可以从页面流向data。

备注: 1.双向绑定一般都应用在表单类元素上。如input、select等。 2.v-model:value 可以简写为 v-model,因为v-model默认收集的就是value值。

代码示例:

模板语法

单向数据绑定:


双向数据绑定:

展示效果

2. 双向绑定的原理:

利用Object.defineProperty方法,其中用 get() 来获取 对象属性 数据,把获取的数据利用新的属性名装起来,然后用set()调用改值来监听设置修改,当内容被修改时就会触发,并且把修改的值赋值给原来的属性名。

Object.defineProperty(obj,'age',{

// value:18, //这样添加的属性不可枚举(无法遍历)

// configurable:'true', //控制属性是否可删除

// enumerable:true, //该属性控制是否可枚举性

// writable:true, //控制属性是否可修改

// 获取

get(){

console.log("你访问了obj对象的age属性");

return value=num

},

// 监听设置修改

set(value){

console.log("你修改了age的值,值是",value);

num=value

}

友情链接