使用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.监听器实现方法,监听输入的两个数字,第一个字数字先存到结果里面,第二个数字根据运算符的不同,实现不同运算结果的存入
源码如下
效果图