利用vue做出简单的计算器。共有三种实现方法:1利用函数2使用监听器3使用计算属性。
1.html
1.1创建一个名为app的盒子装三种方法的html部分
1.2三种方法的html部分基本一样,定义两个文本框,在两个文本框中间设置一个下拉框。在文本框中使用placeholder属性,文本框中使用v-model.number实现双向绑定和将文本框中的内容强制转换为数字类型。下拉列表使用v-model实现双向绑定。第一种方法需要再设置一个按钮,并为按钮设置点击事件。
(第一种方法的html部分)
(第二种方法的html部分)
(第三种方法的html部分)
二.vue部分
在vue部分需要挂载装三种方法html部分的盒子app,定义8个数字(六个输入的数字,两个结果),三个字符(运算符)。