效果图如下:
代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="./js/vue (1).js"></script>
</head>
<body>
<form id="app">
<input type="text" v-model.number="sum_1" @change="change()">
<select v-model="symbol" @change="change()">
<option v-for="(item,key) in list">{{item}}</option>
</select>
<input type="text" v-model.number="sum_2" @change="change()">
=
<input type="text" v-model="sum">
</form>
<script>
var vm = new Vue({
el: "#app",
data: {
list: ['请选择', '+', '-', '×', '÷'],
sum: '',
sum_1: '',
sum_2: '',
symbol: '请选择'
},
methods: {
// 计算函数
change() {
if (this.symbol == '+') {
this.sum = this.sum_1 + this.sum_2
} else if (this.symbol == '-') {
this.sum = this.sum_1 - this.sum_2
} else if (this.symbol == '×') {
this.sum = this.sum_1 * this.sum_2
} else if (this.symbol == '÷') {
this.sum = this.sum_1 / this.sum_2
}
}
}
})
</script>
</body>
</html>
这样使用vue就可以实现简单的计算器啦,赶快试试吧!
觉得好玩,喜欢的可以点个赞哦。谢谢大家