原生手写双向绑定

最新推荐文章于 2024-04-06 20:51:26 发布

原创最新推荐文章于 2024-04-06 20:51:26 发布 · 164 阅读

0 ·

CC 4.0 BY-SA版权

JS 同时被 2 个专栏收录

21 篇文章

订阅专栏

手写实现

3 篇文章

订阅专栏

博客围绕原生双向绑定展开，但具体内容缺失。双向绑定是前端开发重要概念，能实现数据与视图自动同步，提高开发效率和用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		数量<input type="text" id="num">
		价格<input type="text" id="price">
		总价<div id="total">
	</body>
	<script type="text/javascript">
		var num = document.querySelector("#num")
		var price = document.querySelector("#price")
		var total = document.querySelector("#total")
		
		let shopMsg = {
			num:10,
			price:100,
			set _num(val){
				this.num = val;
				total.innerHTML = this.num * this.price;
			},
			set _price(val){
				this.price = val;
				total.innerHTML = this.price * this.num;
			}
		}
		num.value = shopMsg.num;
		price.value = shopMsg.price;
		total.innerHTML = shopMsg.num*shopMsg.price;
		
		num.oninput = function(){
			shopMsg["_num"] = this.value;
		}
		price.oninput = function(e){
			shopMsg["_price"] = this.value;
		}
		
	</script>
</html>