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 相关文章推荐
激活 ActiveX 控件
Oct 09 Javascript
javascript xml为数据源的下拉框控件
Jul 07 Javascript
javascript两种function的定义介绍及区别说明
May 02 Javascript
Js nodeType 属性全面解析
Nov 14 Javascript
javascript实现全角半角检测的方法
Jul 23 Javascript
浅析JavaScript中的array数组类型系统
Jul 18 Javascript
jQuery dataTables与jQuery UI 对话框dialog的使用教程
Sep 02 Javascript
浅谈jquery选择器 :first与:first-child的区别
Nov 20 Javascript
js使用原型对象(prototype)需要注意的地方
Aug 28 Javascript
webpack构建react多页面应用详解
Sep 15 Javascript
对于防止按钮重复点击的尝试详解
Apr 22 Javascript
LayUI+Shiro实现动态菜单并记住菜单收展的示例
May 06 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语法(4)
2006/10/09 PHP
CI框架源码阅读,系统常量文件constants.php的配置
2013/02/28 PHP
php 伪静态之IIS篇
2014/06/02 PHP
php检查是否是ajax请求的方法
2015/04/16 PHP
PHP微信API接口类
2016/08/22 PHP
JQuery之focus函数使用介绍
2013/08/20 Javascript
如何从jQuery的ajax请求中删除X-Requested-With
2013/12/11 Javascript
JS常用函数使用指南
2014/11/23 Javascript
JavaScript实现将xml转换成html table表格的方法
2015/04/17 Javascript
javascript 分号总结及详细介绍
2016/09/24 Javascript
jquery写出PC端轮播图实例
2018/01/26 jQuery
Vue一次性简洁明了引入所有公共组件的方法
2018/11/28 Javascript
Vue.js中该如何自己维护路由跳转记录
2019/05/19 Javascript
Vue页面切换和a链接的本质区别详解
2019/11/12 Javascript
js实现限定范围拖拽的示例
2020/10/26 Javascript
vue 授权获取微信openId操作
2020/11/13 Javascript
JQuery+drag.js上传图片并且实现图片拖曳
2020/11/18 jQuery
django批量导入xml数据
2016/10/16 Python
Python 稀疏矩阵-sparse 存储和转换
2017/05/27 Python
Python 网页解析HTMLParse的实例详解
2017/08/10 Python
Python列表操作方法详解
2020/02/09 Python
Python requests HTTP验证登录实现流程
2020/11/05 Python
10分钟理解CSS3 FlexBox弹性布局
2018/12/20 HTML / CSS
美国美妆网站:B-Glowing
2016/10/12 全球购物
电气技术员岗位职责
2013/11/19 职场文书
上班迟到检讨书
2014/01/10 职场文书
高中生职业规划范文
2014/03/09 职场文书
我的求职择业计划书
2014/04/04 职场文书
暑假学习心得体会
2014/09/02 职场文书
法定代表人身份证明书
2014/09/10 职场文书
督导岗位职责
2015/02/04 职场文书
小学安全工作总结2015
2015/05/18 职场文书
2016拓展训练心得体会范文
2016/01/12 职场文书
python删除csv文件的行列
2021/04/06 Python
Python实现的扫码工具居然这么好用!
2021/06/07 Python
Win10 Anaconda安装python-pcl
2022/04/29 Servers