用vue框架写一个简易(简陋)计算器

最近开始接触Vue.js框架

来写一个简易的计算机案例吧

代码：

!+tab 快速生成一个页面

然后我们利用

./lib/vue.js 是我的vue.js文件所在的位置，写的时候可以用自己文件所在位置进行替换

然后我i们需要三个文本框，一个选择的下拉列表，一个按钮，即：

然后我们用v-model对需要绑定的输入输出框和运算符号进行双向绑定：

   

	   
	   
		   +
		   -
		   *
		   /
	   
	   
	   
	   
   

在data属性内对n1，n2，result，opt赋初值：

data: {
	n1: 0,
	n2: 0,
	result: 0,
	opt: '+'
},

因为v-model是双向绑定，在view层的改变也会同步到vm层。
最后便是函数方法的编写，按钮中定义了一个鼠标单击事件@click="calc"
我么用两个方法来做：
第一种方式：

methods: {
	calc(){     //计算器算数的方法
		逻辑
		switch(this.opt){
			case '+':
				this.result = parseInt(this.n1) + parseInt(this.n2)
			break;
			case '-':
				this.result = parseInt(this.n1) - parseInt(this.n2)
			break;
			case '*':
				this.result = parseInt(this.n1) * parseInt(this.n2)
			break;
			case '/':
				this.result = parseInt(this.n1) / parseInt(this.n2)
			break;
		}
	}
}

第二种方式：
这种是简易方式：正式开发中尽量少用(用拼接的方式做)
methods: {
calc(){
var runCode = ‘parseInt(this.n1) ’ + this.opt + ’ parseInt(this.n2)’
this.result = eval(runCode)
}
}

这样一个简易计算器就做好了（效果如图）。
当然，如果需要再添加别的运算，添加具有新运算值的option，并将计算方法编入calc方法中即可。

第一次写博客，如有问题，戳我就ok！
欢迎批评和指正。