<!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>
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
Collection
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
