<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/vue-2.6.9.min.js" type="text/javascript" charset="utf-8"></script>
<body>
<div class="demo">
<p>
数值A是<input type="number" v-model.number="numA" />
</p>
<p>
数值A是<input type="number" v-model.number="numB" />
</p>
<div>
<p>计算结果</p>
<p>和:<span>{{result.add}}</span></p>
<p>差:<span>{{result.sub}}</span></p>
<p>积:<span>{{result.mul}}</span></p>
<p>商:<span>{{result.div}}</span></p>
</div>
</div>
</body>
<script type="text/javascript">
var demo = new Vue({
el: ".demo",
data: {
numA: 0,
numB: 0
},
computed: {
result: function() {
var add = this.numA + this.numB;
var sub = this.numA - this.numB;
var mul = this.numA * this.numB;
var div = this.numA / this.numB
return {
add: add,
sub: sub,
mul: mul,
div: div
}
}
}
})
</script>
</html>
