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之bind使用介绍
Oct 09 Javascript
jquery实现的一个导航滚动效果具体代码
May 27 Javascript
点击进行复制的JS代码实例
Aug 23 Javascript
JQuery操作单选按钮以及复选按钮示例
Sep 23 Javascript
jquery 扑捉回车键事件代码
Apr 24 Javascript
JS组件系列之MVVM组件 vue 30分钟搞定前端增删改查
Apr 28 Javascript
node中koa中间件机制详解
Aug 22 Javascript
vue升级之路之vue-router的使用教程
Aug 14 Javascript
在js代码拼接dom对象到页面上的模板总结
Oct 21 Javascript
vue axios封装及API统一管理的方法
Apr 18 Javascript
使用Vue 实现滑动验证码功能
Jun 27 Javascript
微信小程序获取地理位置及经纬度授权代码实例
Sep 18 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
jQuery Ajax方法调用 Asp.Net WebService 的详细实例代码
2011/04/27 Javascript
javascript 图片裁剪技巧解读
2012/11/15 Javascript
js图片翻书效果代码分享
2015/08/20 Javascript
浅析javascript函数表达式
2016/02/10 Javascript
js+html5实现canvas绘制椭圆形图案的方法
2016/05/21 Javascript
AngularJS基础 ng-list 指令详解及示例代码
2016/08/02 Javascript
BootStrap无限级分类(无限极分类封装版)
2016/08/26 Javascript
再谈javascript注入 黑客必备!
2016/09/14 Javascript
Bootstrap Scrollspy源码学习
2017/03/02 Javascript
jQuery插件HighCharts实现的2D对数饼图效果示例【附demo源码下载】
2017/03/09 Javascript
使用vue的v-for生成table并给table加上序号的实例代码
2017/10/27 Javascript
详解vue.js数据传递以及数据分发slot
2018/01/20 Javascript
详解create-react-app 2.0版本如何启用装饰器语法
2018/10/23 Javascript
详解promise.then,process.nextTick, setTimeout 以及 setImmediate的执行顺序
2018/11/21 Javascript
JavaScript模块管理的简单实现方式详解
2019/06/15 Javascript
vue实现匀速轮播效果
2020/06/29 Javascript
解决vue项目,npm run build后,报路径错的问题
2020/08/13 Javascript
vue v-on:click传递动态参数的步骤
2020/09/11 Javascript
Python实现去除列表中重复元素的方法小结【4种方法】
2018/04/27 Python
Python 限制线程的最大数量的方法(Semaphore)
2019/02/22 Python
Python爬虫 scrapy框架爬取某招聘网存入mongodb解析
2019/07/31 Python
Python任务调度模块APScheduler使用
2020/04/15 Python
python+requests接口压力测试500次,查看响应时间的实例
2020/04/30 Python
Python浮点型(float)运算结果不正确的解决方案
2020/09/22 Python
css3发光搜索表单分享
2014/04/11 HTML / CSS
仿CSDN Blog返回页面顶部功能实现原理及代码
2013/06/30 HTML / CSS
澳大利亚领先的在线葡萄酒零售商:Get Wines Direct
2018/03/27 全球购物
促销活动总结
2014/04/28 职场文书
电话客服工作职责
2014/07/27 职场文书
2014年科协工作总结
2014/12/09 职场文书
求职意向书范本
2015/05/11 职场文书
2016新年感言
2015/08/03 职场文书
Python Pygame实战之塔防游戏的实现
2022/03/17 Python
Kubernetes控制节点的部署
2022/04/01 Servers
Python之matplotlib绘制饼图
2022/04/13 Python
阿里面试Nacos配置中心交互模型是push还是pull原理解析
2022/07/23 Java/Android