简单写个事件双向绑定的例子
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div>
<input type="text" name="" id="jsInputName" />
<p>你好，<span id='jsName'></span></p>
<div id="jsInstruction"></div>
</div>
<script type="text/javascript">
var user={};
var jsInputName=document.getElementById('jsInputName');
jsInputName.addEventListener('input',function(){
user.name=jsInputName.value;
});
Object.defineProperty(user,'name',{
set:function(newValue){
document.getElementById('jsName').innerHTML=newValue;
jsInputName.value=newValue;
},
get:function(){
return document.getElementById('jsName').innerHTML;
}
});
Object.defineProperty(user,'instruction',{
set:function(newValue){
document.getElementById('jsInstruction').innerHTML=newValue;
},
get:function(){
return document.getElementById('jsInstruction').innerHTML;
}
});
user.name="吴惟刚";
user.instruction="吴惟刚是华宇的一名前端工程师";
setTimeout(function(){
user.name="王会锋";
user.instruction="王会锋是华宇的一名女前端工程师";
},5000);
</script>
</body>
</html>
-
« 上一篇：
js，angular文字搜索高亮的代码