vue实现简易计算器，vue基础
这样使用vue就可以实现简单的计算器啦，赶快试试吧！觉得好玩，喜欢的可以点个赞哦。
·
效果图如下：
代码如下：
<!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就可以实现简单的计算器啦，赶快试试吧！
觉得好玩，喜欢的可以点个赞哦。谢谢大家
基于 Vue 的企业级 UI 组件库和中后台系统解决方案，为数万开发者服务。
更多推荐
3
0- 0
已为社区贡献1条内容
所有评论(0)