vue实现计算器功能


Posted in Javascript onFebruary 22, 2020

本文实例为大家分享了vue实现计算器功能的具体代码,供大家参考,具体内容如下

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>计算器</title>
 <script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
 <input type="text" v-model="n1">
 <select v-model="opt">
  <option value="+">+</option>
  <option value="-">-</option>
  <option value="*">*</option>
  <option value="/">/</option>
 </select>
 <input type="text" v-model="n2">
 <input type="button" value="=" @click="calc">
 <input type="text" v-model="result">
</div>
<script>
new Vue({
 el: '#app',
 data: {
  n1: 0,
  n2: 0,
  result: 0,
  opt: '+'
 },
 methods: {
  calc() {
   switch (this.opt) {
    case "+":
     this.result = parseInt(this.n1) + parseInt(this.n2);
     break;
    case "-":
     this.result = parseInt(this.n1) - parseInt(this.n2);
     break;
    case "*":
     this.result = parseInt(this.n1) * parseInt(this.n2);
     break;
    case "/":
     this.result = parseInt(this.n1) / parseInt(this.n2);
     break;
   }
  }
 }
})
</script>
</body>
</html>

效果图:

vue实现计算器功能

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
游戏人文件夹程序 ver 4.03
Jul 14 Javascript
基于Jquery的回车成tab焦点切换效果代码(Enter To Tab )
Nov 14 Javascript
JavaScript根据数据生成百分比图和柱状图的实例代码
Jul 14 Javascript
Jquery增加鼠标中间功能mousewheel的实例代码
Sep 05 Javascript
js报$ is not a function 的问题的解决方法
Jan 20 Javascript
node.js中的path.basename方法使用说明
Dec 09 Javascript
使用node.js搭建服务器
May 20 Javascript
select自定义小三角样式代码(实用总结)
Aug 18 Javascript
vue2.0使用v-for循环制作多级嵌套菜单栏
Jun 25 Javascript
angular8和ngrx8结合使用的步骤介绍
Dec 01 Javascript
vue项目中使用eslint+prettier规范与检查代码的方法
Jan 16 Javascript
eslint+prettier统一代码风格的实现方法
Jul 22 Javascript
js实现网页版贪吃蛇游戏
Feb 22 #Javascript
微信小程序 bindtap 传参的实例代码
Feb 21 #Javascript
leaflet加载geojson叠加显示功能代码
Feb 21 #Javascript
JavaScript中this函数使用实例解析
Feb 21 #Javascript
如何通过JS实现转码与解码
Feb 21 #Javascript
TensorFlow.js 微信小程序插件开始支持模型缓存的方法
Feb 21 #Javascript
微信小程序使用 vant Dialog组件的正确方式
Feb 21 #Javascript
You might like
php下载文件的代码示例
2012/06/29 PHP
php中的一些数组排序方法分享
2012/07/20 PHP
PHP获取MAC地址的具体实例
2013/12/13 PHP
PHP使用preg_split和explode分割textarea存放内容的方法分析
2017/07/03 PHP
ext 列表页面关于多行查询的办法
2010/03/25 Javascript
JQuery获取文本框中字符长度的代码
2011/09/29 Javascript
JavaScript作用域链使用介绍
2013/08/29 Javascript
js倒计时抢购实例
2015/12/20 Javascript
mac上node.js环境的安装测试
2017/07/03 Javascript
JavaScript实现旋转轮播图
2020/08/18 Javascript
如何解决.vue文件url引用文件的问题
2019/01/18 Javascript
python自带的http模块详解
2016/11/06 Python
Python中常用信号signal类型实例
2018/01/25 Python
Windows下安装Django框架的方法简明教程
2018/03/28 Python
Python实现统计给定列表中指定数字出现次数的方法
2018/04/11 Python
Django如何使用第三方服务发送电子邮件
2019/08/14 Python
python实现图片上添加图片
2019/11/26 Python
详解Python在使用JSON时需要注意的编码问题
2019/12/06 Python
Python通过zookeeper实现分布式服务代码解析
2020/07/22 Python
Pandas DataFrame求差集的示例代码
2020/12/13 Python
美国酒店控股公司:Choice Hotels
2018/06/15 全球购物
PUMA澳大利亚官方网站:德国运动品牌
2018/10/19 全球购物
Quiksilver荷兰官方网站:冲浪和滑雪板
2019/11/16 全球购物
会计自我鉴定
2013/11/02 职场文书
一年级班主任感言
2014/03/08 职场文书
新学期决心书
2014/03/11 职场文书
法学专业毕业生自荐信
2014/06/11 职场文书
技术股东合作协议书
2014/12/02 职场文书
医院财务人员岗位职责
2015/04/14 职场文书
电信营业员岗位职责
2015/04/14 职场文书
担保贷款承诺书
2015/04/30 职场文书
早会开场白台词大全
2015/06/01 职场文书
招商银行收入证明
2015/06/17 职场文书
如何用JS实现简单的数据监听
2021/05/06 Javascript
小喇叭开始广播了! 四十多年前珍贵老照片
2022/05/09 无线电
关于对TypeScript泛型参数的默认值理解
2022/07/15 Javascript