vue中双向数据绑定怎么实现

时间:2022-12-06 01:48

vue中双向数据绑定怎么实现

vue中双向数据绑定是通过数据劫持结合发布订阅模式的方式来实现的,其核心方法是Object.defineProperty()方法。

实现双向数据绑定的示例:

<!DOCTYPEhtml>

<html>

<head>

<metacharset="utf-8">

<metahttp-equiv="X-UA-Compatible"content="IE=edge">

<title></title>

</head>

<body>

<inputtype="text"id="userName">

<br/>

<spanid="uName"></span>

<scripttype="text/javascript">

varobj={

pwd:"123456"

};

Object.defineProperty(obj,"userName",{

get:function(){

console.log("getinit");

},

set:function(val){

console.log("setinit");

document.getElementById("uName").innerText=val;

document.getElementById("userName").value=val;

}

});

document.getElementById("userName").addEventListener("keyup",function(){

obj.userName=event.target.value;

});

</script>

</body>

</html>


标签:
随便看看
本类推荐
本类排行
热门标签

我国国家通讯社行不行啊细狗新年贺词祝福语2023年祝福语新年新年贺词新年贺词祝福语居家抗病毒小药箱除夕高速免费吗2022年除夕高速免费吗春联春联句子大全春联句子大全七字年夜饭十二道菜年夜饭十二道菜单年夜饭吃什么年夜饭吃什么菜吃年夜饭的寓意年夜饭黑芝麻菊花茶晒菊花茶腌腊肉送妈妈生日礼物汉白玉送闺蜜水钻送女人礼物爸爸生日送礼物送老公