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 相关文章推荐
JavaScript QueryString解析类代码
Jan 17 Javascript
在JavaScript里防止事件函数高频触发和高频调用的方法
Sep 06 Javascript
JavaScript中this的9种应用场景及三种复合应用场景
Sep 12 Javascript
浅谈javascript中的call、apply、bind
Mar 06 Javascript
jQuery插件 Jqplot图表实例
Jun 18 Javascript
jQuery extend()详解及简单实例
May 06 jQuery
jQuery Ajax使用FormData上传文件和其他数据后端web.py获取
Jun 11 jQuery
webpack进阶——缓存与独立打包的用法
Aug 02 Javascript
微信小程序实现自定义加载图标功能
Jul 19 Javascript
layui实现鼠标移动到单元格上显示数据的方法
Sep 11 Javascript
JavaScript链式调用原理与实现方法详解
May 16 Javascript
基于JS实现table导出Excel并保留样式
May 19 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
PHP 多维数组排序实现代码
2009/08/05 PHP
PHP操作数组相关函数
2011/02/03 PHP
自己在做项目过程中学到的PHP知识收集
2012/08/20 PHP
PHP中数字检测is_numeric与ctype_digit的区别介绍
2012/10/04 PHP
PHP实现留言板功能的详细代码
2017/03/25 PHP
些很实用且必用的小脚本代码
2006/06/26 Javascript
css把超出的部分显示为省略号的方法兼容火狐
2008/07/23 Javascript
JSON 学习之JSON in JavaScript详细使用说明
2010/02/23 Javascript
JS运行耗时操作的延时显示方法
2010/11/19 Javascript
JQuery中getJSON的使用方法
2010/12/13 Javascript
jquery 触发a链接点击事件解决方案
2013/05/02 Javascript
基于JQuery和CSS3实现仿Apple TV海报背景视觉差特效源码分享
2015/09/21 Javascript
基于jQuery仿淘宝产品图片放大镜代码分享
2020/06/23 Javascript
js格式化时间的方法
2015/12/18 Javascript
基于对象合并功能的实现示例
2017/10/10 Javascript
vue.js移动数组位置,同时更新视图的方法
2018/03/08 Javascript
vue主动刷新页面及列表数据删除后的刷新实例
2018/09/16 Javascript
webpack4与babel配合使es6代码可运行于低版本浏览器的方法
2018/10/12 Javascript
小程序实现左滑删除功能
2018/10/30 Javascript
Three.js实现简单3D房间布局
2018/12/30 Javascript
VUE实现图片验证码功能
2020/11/18 Javascript
Javascript原生ajax请求代码实例
2020/02/20 Javascript
[48:54]VGJ.T vs infamous Supermajor小组赛D组败者组第一轮 BO3 第二场 6.3
2018/06/04 DOTA
下载给定网页上图片的方法
2014/02/18 Python
python统计字符串中指定字符出现次数的方法
2015/04/04 Python
在Django中编写模版节点及注册标签的方法
2015/07/20 Python
Django框架教程之正则表达式URL误区详解
2018/01/28 Python
对Python实现累加函数的方法详解
2019/01/23 Python
浅谈Python爬虫基本套路
2019/03/25 Python
介绍一下UNIX启动过程
2013/11/14 面试题
材料加工工程求职信
2014/02/19 职场文书
秋菊打官司观后感
2015/06/03 职场文书
煤矿隐患排查制度
2015/08/05 职场文书
社区干部培训心得体会
2016/01/06 职场文书
公文写作:教你写“建议书”
2019/05/07 职场文书
解决golang 关于全局变量的坑
2021/05/06 Golang