使用vue做简单的计算器

使用vue学三种简单的计算器

1.使用computed

1.1先引入vue.js

1.2 定义一个id为app的盒子，盒子内放两个文本框，行内放一个placeholder属性提示文本框内容；一个下拉框，用来切换加减乘除；分别用v-model属性进行双向绑定，方便后面的调用

1.3 声明一个对象，对象内规定作用范围、声明要使用的属性；内容通过switch case判断语句进行相应的运算

1.4 效果图如下

 1.5 源码

 2.使用函数方法

函数方法和计算方法差不多，只不过函数方法需要使用绑定事件绑定在一个按钮上，点击才能实现函数效果

2.1源码如下

效果图

 

 

3.监听器实现方法，监听输入的两个数字，第一个字数字先存到结果里面，第二个数字根据运算符的不同，实现不同运算结果的存入 

源码如下

效果图