Vue中双向数据绑定是通过数据劫持结合发布订阅模式的方式来实现的,其核心方法是Object.defineProperty()方法。实现双向数据绑定的示例:<!DOCTYPE html><html><h
Vue中双向数据绑定是通过数据劫持结合发布订阅模式的方式来实现的,其核心方法是Object.defineProperty()方法。
实现双向数据绑定的示例:
<!DOCTYPE html><html>
<head>
<meta charset="utf-8">
<meta Http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
</head>
<body>
<input type="text" id="userName">
<br/>
<span id="uName"></span>
<script type="text/javascript">
var obj={
pwd:"123456"
};
Object.defineProperty(obj,"userName",{
get: function(){
console.log("get init");
},
set: function(val){
console.log("set init");
document.getElementById("uName").innerText=val;
document.getElementById("userName").value=val;
}
});
document.getElementById("userName").addEventListener("keyup",function(){
obj.userName=event.target.value;
});
</script>
</body>
</html>
--结束END--
本文标题: vue中双向数据绑定怎么实现
本文链接: https://www.lsjlt.com/news/112768.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑,方便收藏和打印~
2024-03-29
2024-03-29
2024-03-29
2024-03-29
2024-03-29
2024-03-29
2024-03-29
2024-03-29
2024-03-29
2024-03-29
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
0