使用vue实现简单计算器

使用vue实现简单计算器

这个简单的例子意在了解vue中的v-for、v-model内置指令的使用

以下是效果图

（我将其命名为“廉价计算器”）（QAQ）

html代码块

<div id="app">
	<input type="number" v-model.number="sum_1" placeholder="请输入数值"/>
	<select v-model="symbol">
		<option v-for="(item,key) in list">{{item}}</option>
	</select>
	<input type="number" v-model.number="sum_2" placeholder="请输入数值"/>
	<button @click="btn">计算</button>
	<input type="text" v-model="sum" placeholder="结果"/>
</div>

js代码块

var vm = new Vue({

				el: "#app",
				data: {
					list: ['请选择', '+', '-', '×', '÷'],
					sum: '',
					sum_1: 10,
					sum_2: '',
					symbol: '请选择'
				},

				methods: {
					// 绑定btn计算按钮
					btn() {
						this.count
					}
				},
				
				computed:{
					// 计算函数
					count:function(e){
						if (this.symbol == '请选择') {
							alert('请选择符号')
						} 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
						} else if (this.symbol == '÷') {
							this.sum = this.sum_1 / this.sum_2
						} else {
							console.log("憨批")//纯搞笑性质
						}
					}
				}



			})