<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="app">
<input type="text" id="txt">
<div id="yilai">收集依賴</div>
<p id="show"></p>
</div>
<script>
// 語(yǔ)法:Object.defineProperty(obj,property,descriptor)
// 參數(shù)一:obj
// 綁定屬性的目標(biāo)對(duì)象
// 參數(shù)二:property
// 綁定的屬性名
// 參數(shù)三:descriptor
// 屬性描述(配置),且此參數(shù)本身為一個(gè)對(duì)象
// 屬性值1:value
// 設(shè)置屬性默認(rèn)值
// 屬性值2:writable
// 設(shè)置屬性是否能夠修改
// 屬性值3:enumerable
// 設(shè)置屬性是否可以枚舉,即是否允許遍歷
// 屬性值4:configurable
// 設(shè)置屬性是否可以刪除或編輯
// 屬性值5:get
// 獲取屬性的值
// 屬性值6:set
// 設(shè)置屬性的值
var obj = {}
Object.defineProperty(obj, 'txt', {
set: function(newValue) {
document.getElementById('txt').value = newValue
document.getElementById('show').innerHTML = newValue
},
get: function() {
return obj
},
},
)
console.log(obj.txt)
//鍵盤事件
document.addEventListener('keyup',
function(e) {
console.log(e)
obj.txt = e.target.value
console.log(obj.txt)
})
</script>
</body>
</body>
</html>
defineProperty
最后編輯于 :
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。
推薦閱讀更多精彩內(nèi)容
- 在使用get函數(shù)監(jiān)聽屬性的時(shí)候,不能直接監(jiān)聽當(dāng)前屬性,否則會(huì)出現(xiàn)死循環(huán)。所以在使用前我將對(duì)象進(jìn)行淺拷貝的原因 每一...
- 一、實(shí)現(xiàn)mvvm的雙向綁定原理 1.Vue三要素 響應(yīng)式: 例如如何監(jiān)聽數(shù)據(jù)變化,其中的實(shí)現(xiàn)方法就是我們提到的雙向...
- 其實(shí)vue.js作者在這里的時(shí)候聊到了原理,也就是關(guān)于視圖和數(shù)據(jù)動(dòng)態(tài)變化的原因。 如何追蹤變化。但是還是需要一些基...
- 寫在前面: 2018年11月16日早上,Vue.js的作者尤大大在 Vue Toronto 的主題演講中預(yù)演了 V...
- 相信大家對(duì)于這兩個(gè)名詞并不陌生,最知名的變化就是vue從2到3底層數(shù)據(jù)響應(yīng)使用的變化。今天得幸有時(shí)間,讓我們重新溫...