<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="king">
<!--方法1 使用Number()强制转换为数字类型-->
<!--缺点：浮点也包含在内了-->
<input type="text" v-model="number1"> + <input type="text" v-model="number2"> = <span>{{Number(number1)+Number(number2)}}</span>
<hr>
<!--方法2 使用-->
<input type="text" v-model="number1"> + <input type="text" v-model="number2"> = <span>{{parseInt(number1)+parseInt(number2)}}</span>
<hr>
<!--方法3-->
<input type="text" v-model="number1" placeholder="请输入要计算的数字"> + <input type="text" v-model="number2" placeholder="请输入要计算的数字"> = <span>{{sum}}</span>
</div>
<script>
new Vue({
el:'#king',
data:{
number1:'',
number2:'',
sum:'',
},
// 方法3 引用监听
methods:{
summer:function () {
this.sum = parseInt(this.number1)+parseInt(this.number2);
}
},
watch:{
//监听到number1变化就执行求和
number1:function () {
this.summer();
},
//监听到number2变化就执行求和
number2:function () {
this.summer()
}
}
})
</script>
</body>
</html>
