<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<input type="text">
<div></div>
</body>
<script>
// 双向绑定：数据，视图，当视图变化,数据变;数据变,视图变
const ipt = document.querySelector("input");
const div = document.querySelector("div");
//视图视图的变化可以轻易通过oninput事件来实现
/* ipt.oninput = function () {
div.innerText = this.value;
}*/
//但是Vue中是数据与视图的双向绑定
//需要通过 Object.defineProperty()方法实现
let data = {
str: "你还好吗?",
}
let str = data.str;
//当改变data中的str数据时 会发生拦截
Object.defineProperty(data, "str", {
get() {
//获取data中的str数据时 触发
return str
},
set(v) {
//v 是改变之后的值
// 当改变data中的str数据时 触发
str = div.innerText = ipt.value = v
console.log(111111, this === data)
//此时的this是拦截的对象
}
})
div.innerText = ipt.value = str;
ipt.oninput = function () {
data.str = this.value;
}
</script>
</html>
Vue双向数据绑定简易理解版
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章