vue-model实现简易计算器


Posted in Javascript onAugust 17, 2020

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

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>Vue</title>
 <script src="../lib/vue-2.4.0.js"></script>
</head>
<body>
 
 <div id="app" >
  <!-- 数字一 -->
  <input type="text" v-model='n1' placeholder="0">
  <!-- 加减乘除 -->
  <select v-model='opt'>
   <option value="+"> + </option>
   <option value="-">-</option>
   <option value="*">*</option>
   <option value="/">/</option>
  </select>
  <!-- 数字2 -->
  <input type="text" v-model='n2' placeholder="0">
  <!-- 等号 -->
  <input type="button" value='=' >
  <!-- 结果 -->
  <input type="text" v-model='result' placeholder="0">
  <!-- 确定按钮 -->
  <input type="button" value='结果' @click='calc'>
  <!-- 归零 -->
  <input type="button" value='归零' @click='zero'>


 </div>

 <script>
  var vm = new Vue({
   el: '#app', //表示当前new的这个实例要控制页面上的那个区域
   data: { //data属性存放着 el 中要用到的数据
    n1: '',
    n2:'',
    result:'',
    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;
     // }

     // 简写
     var codeStr = 'parseInt(this.n1) '+ this.opt +' parseInt(this.n2)'
     this.result = eval(codeStr)
    },
    zero(){
     this.n1 = '',
     this.n2 = '',
     this.result = '',
     this.opt = '+'
    }

   }
  }) 
 </script>

</body>
</html>

关于计算器相关技术文章请点击专题: javascript计算器功能汇总

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

Javascript 相关文章推荐
JS 动态获取节点代码innerHTML分析 [IE,FF]
Nov 30 Javascript
JavaScript 入门基础知识 想学习js的朋友可以参考下
Dec 26 Javascript
jquery实现隐藏与显示动画效果/输入框字符动态递减/导航按钮切换
Jul 01 Javascript
js验证输入是否为手机号码或电话号码示例
Dec 30 Javascript
JavaScript定义类和对象的方法
Nov 26 Javascript
javascript 动态创建表格
Jan 08 Javascript
深入浅析JavaScript中对事件的三种监听方式
Sep 29 Javascript
浅谈JS运算符&amp;&amp;和|| 及其优先级
Aug 10 Javascript
jQuery实现获取元素索引值index的方法
Sep 18 Javascript
webpack配置的最佳实践分享
Apr 21 Javascript
vue cli2.0单页面title修改方法
Jun 07 Javascript
微信小程序实现发送模板消息功能示例【通过openid推送消息给用户】
May 05 Javascript
Vue实现手机计算器
Aug 17 #Javascript
Vuex实现购物车小功能
Aug 17 #Javascript
jquery+ajax实现异步上传文件显示进度条
Aug 17 #jQuery
jQuery实现异步上传一个或多个文件
Aug 17 #jQuery
vue项目里面引用svg文件并给svg里面的元素赋值
Aug 17 #Javascript
vue动态加载SVG文件并修改节点数据的操作代码
Aug 17 #Javascript
Vue如何将页面导出成PDF文件
Aug 17 #Javascript
You might like
详解WordPress中过滤链接与过滤SQL语句的方法
2015/12/18 PHP
php parse_str() 函数的定义和用法
2016/05/23 PHP
php如何比较两个浮点数是否相等详解
2019/02/12 PHP
Laravel框架数据库迁移操作实例详解
2020/04/06 PHP
Extjs学习笔记之一 初识Extjs之MessageBox
2010/01/07 Javascript
jquery获取input的value问题说明
2010/08/19 Javascript
一个简单的网站访问JS计数器 刷新1次加1次访问
2012/09/20 Javascript
jquery插件之信息弹出框showInfoDialog(成功/错误/警告/通知/背景遮罩)
2013/01/09 Javascript
JavaScript截取字符串的Slice、Substring、Substr函数详解和比较
2014/03/20 Javascript
JQuery中Text方法用法实例分析
2015/05/18 Javascript
javascript实现倒计时并弹窗提示特效
2015/06/05 Javascript
jquery.fastLiveFilter.js实现输入自动过滤的方法
2015/08/11 Javascript
js实现文本框输入文字个数限制代码
2015/12/25 Javascript
原生JS取代一些JQuery方法的简单实现
2016/09/20 Javascript
js遍历json对象所有key及根据动态key获取值的方法(必看)
2017/03/09 Javascript
angular.extend方法的具体使用
2017/09/14 Javascript
three.js中3D视野的缩放实现代码
2017/11/16 Javascript
web3.js增加eth.getRawTransactionByHash(txhash)方法步骤
2018/03/15 Javascript
Nuxt默认模板、默认布局和自定义错误页面的实现
2020/05/11 Javascript
微信小程序实现首页弹出广告
2020/12/03 Javascript
[02:10]DOTA2亚洲邀请赛 EG战队出场宣传片
2015/02/07 DOTA
用yum安装MySQLdb模块的步骤方法
2016/12/15 Python
Python openpyxl读取单元格字体颜色过程解析
2019/09/03 Python
Python API len函数操作过程解析
2020/03/05 Python
基于python爬取有道翻译过程图解
2020/03/31 Python
浅谈Python爬虫原理与数据抓取
2020/07/21 Python
玩转CSS3色彩
2010/01/16 HTML / CSS
html5 Canvas画图教程(8)—canvas里画曲线之bezierCurveTo方法
2013/01/09 HTML / CSS
新加坡最佳婴儿用品店:Mamahood.com.sg
2018/08/26 全球购物
高三体育教学反思
2014/01/29 职场文书
市场专员岗位职责
2014/02/14 职场文书
信用卡工资证明格式
2014/09/13 职场文书
党员个人批评与自我批评
2014/10/14 职场文书
2015年财务工作总结范文
2015/03/31 职场文书
大学生干部培训心得体会
2016/01/06 职场文书
python 爬取京东指定商品评论并进行情感分析
2021/05/27 Python