vue作业

这篇博客介绍了如何使用Vue框架实现一个简单的计算器,涵盖了函数方法、监听方法和计算属性三种实现方式。通过HTML布局,结合Vue的v-model和事件处理,实现了数字和运算符的双向绑定及计算功能。
摘要由CSDN通过智能技术生成

利用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个数字(六个输入的数字,两个结果),三个字符(运算符)。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值