使用Vue实现简单的计算器小练习（三种方式，简单易懂）

使用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计算属性实现