使用vue实现简单计算器(三种方式)
这个练习可以帮助我们加深了解vue中v-model指令的使用和computed计算属性、watch状态监听的使用以及一些css中表单标签等的使用。
以下是效果图
来了解一下用到的知识点:
1.v-model是什么?
v-model 是Vue框架的一种内置的API指令,本质是一种语法糖写法。它负责监听用户的输入事件以更新数据,并对一些极端场景进行一些特殊处理。
v-model指令可以在表单 input、textarea以及select元素上创建双向数据绑定。
2.watch状态监听
Vue中的事件处理方法是根据用户所需自行定义的,它可以通过单机事件、键盘事件等触发条件来触发,但不能自动监听当前Vue实例的状态变化。为了解决上述问题,Vue提供了watch状态监听功能,只需监听当前Vue实例中的数据变化,就回调用当前数据所绑定的事件处理方式。
3.computed计算属性
Vue提供了一种更通用的方式来观察和响应Vue实例上的数据变动,当有一些数据需要随着其他数据变动而变动时,就需要使用 computed 计算属性。在事件处理方法中,this 指向的Vue实例的计算属性结果会被缓存起来,只有依赖的响应式属性变化时,才会重新计算,返回最终结果。
下面使用三种方式来实现这个练习!
先看HTML部分,这三种方法的HTML部分相同。
HTML部分由三个文本框,一个下拉框,一个按钮组成,相对简便。
第一种实现:使用的是methods方法实现
命名了一个pd()方法,里面一个switch语句来实现。
第二种实现:watch监听来实现
因为我们要监听多个值,所以先用conputed定义一个add对象,然后再用watch监听该对象。
第三种实现:computed计算属性实现