Vue.js 数据双向绑定 v-model 研究
粗略研究一下，借助原生 JS 代码实现类似 Vue.js 中 v-model 数据双向绑定的功能：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="text" value="">
<button onclick="me.username = 'kitty'">修改</button>
<button onclick="alert(me.username)">显示</button>
<script>
const me = {
_username: 'Jason'
};
Object.defineProperty(me, 'username', {
get() {
return me._username;
},
set(newUsername) {
me._username = newUsername;
document.querySelector('#txt').value = newUsername;
}
});
document.querySelector('#txt').addEventListener('input', function (event) {
me.username = this.value;
})
document.querySelector('#txt').value = me.username;
</script>
</body>
</html>如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论