收藏
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>两个整数相加，双向绑定</title>
<script type="text/javascript" src="Vue.js"></script>
<style type="text/css">
input{
display: inline-block;
width: 50px;text-indent: 0.2em;
}
</style>
</head>
<body>
<!-- 在当前页面中创建一个挂载点 -->
<div id="box">
计算两数的和：
<input type="text" v-model="num">
<span>+</span>
<input type="text" v-model="nums">
= <span>{{sum}}</span>
</div>
<script type="text/javascript">
// 创建Vue的实例
new Vue({
// 第一个属性绑定一个挂载点
el:'#box', //用ID选定
// 创建了一个数据模型
data:{
num:0,
nums:0,
sum:0,
},
// watch 监听器属性，监听页面中变量值的变化
watch:{
num:function() {
this.sum = parseFloat(this.num) + parseFloat(this.nums);
},
nums:function(){
this.sum = parseFloat(this.nums) + parseFloat(this.num);
}
}
});
</script>
</body>
</html>
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
