说明
使用 JavaScript 模拟 Vue,实现渲染,数据改变时,能够同步显示到输入框上
html
<div id="app">
<input type="text" v-model="name" />
</div>
JavaScript
<script type="text/javascript">
var data = {
name : "杜子腾"
}
var appHTML = document.getElementById("app").innerHTML
// 用js实现vue的功能
// 渲染
document.querySelector('[v-model="name"]').value = data.name
// 双向绑定之一,当data中的属性改变时,同步显示到网页上
// data 对象的 name 属性的 原值
var nameData = data.name
// 监听 data 对象的 name属性
Object.defineProperty(data,"name",{
// 访问 data 的 name 属性时,就会触发执行该函数
get:function(){
return nameData
},
// 改变 data 的 name 属性时,就会触发执行该函数
set:function(newValue){
nameData = newValue
document.querySelector('[v-model="name"]').value = data.name
// console.log(" name 的值改变了,新值是:",newValue)
}
})
// 双向绑定之二:输入框的内容改变时,修改 data 中的数据
document.querySelector('[v-model="name"]').addEventListener("keyup",function(e){
data.name = e.target.value
})
</script>