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 注册事件代码
Jan 27 Javascript
IE6、IE7中获取Button元素的值的bug说明
Aug 28 Javascript
jquery 图片缩放拖动的简单实例
Jan 08 Javascript
5个可以帮你理解JavaScript核心闭包和作用域的小例子
Oct 08 Javascript
js实现文本框只允许输入数字并限制数字大小的方法
Aug 19 Javascript
JavaScript设置、获取、清除单值和多值cookie的方法
Nov 17 Javascript
Vue.js每天必学之内部响应式原理探究
Sep 07 Javascript
浅谈JavaScript作用域和闭包
Sep 18 Javascript
swiper动态改变滑动内容的实现方法
Jan 17 Javascript
vue自定义指令directive的使用方法
Apr 07 Javascript
深入解析koa之中间件流程控制
Jun 17 Javascript
深入理解javascript prototype的相关知识
Sep 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之PHP语法学习笔记1
2006/12/17 PHP
php实现查看邮件是否已被阅读的方法
2013/12/03 PHP
PHP实现多维数组转字符串和多维数组转一维数组的方法
2015/08/08 PHP
php 如何禁用eval() 函数实例详解
2016/12/01 PHP
JQuery团队打造的javascript单元测试工具QUnit介绍
2010/02/26 Javascript
JQuery 自定义CircleAnimation,Animate方法学习笔记
2011/07/10 Javascript
基于jquery ajax 用户无刷新登录方法详解
2012/04/28 Javascript
img onload事件绑定各浏览器均可执行
2012/12/19 Javascript
javascript与cookie 的问题详解
2013/11/11 Javascript
jquery实现两边飘浮可关闭的对联广告
2015/11/27 Javascript
微信小程序 input输入框控件详解及实例(多种示例)
2016/12/14 Javascript
JavaScript调试的多个必备小Tips
2017/01/15 Javascript
JavaScrpt的面向对象全面解析
2017/05/09 Javascript
zTree异步加载展开第一级节点的实现方法
2017/09/05 Javascript
Vue使用mixins实现压缩图片代码
2018/03/14 Javascript
Egg Vue SSR 服务端渲染数据请求与asyncData
2019/11/24 Javascript
Vue获取页面元素的相对位置的方法示例
2020/02/05 Javascript
[01:01:42]Secret vs Optic Supermajor 胜者组 BO3 第二场 6.4
2018/06/05 DOTA
[49:28]VP vs Optic 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
Python实现在matplotlib中两个坐标轴之间画一条直线光标的方法
2015/05/20 Python
python判断一个对象是否可迭代的例子
2019/07/22 Python
Python OrderedDict的使用案例解析
2019/10/25 Python
django中url映射规则和服务端响应顺序的实现
2020/04/02 Python
python 实现aes256加密
2020/11/27 Python
德国黑胶唱片、街头服装及运动鞋网上商店:HHV
2018/08/24 全球购物
锐步英国官网:Reebok英国
2019/11/29 全球购物
某个公司的Java笔面试题
2016/03/11 面试题
大专生的学习自我评价
2013/12/04 职场文书
一年级班主任感言
2014/03/08 职场文书
金秋助学感谢信
2015/01/21 职场文书
个人求职自荐信范文
2015/03/06 职场文书
2015年度个人业务工作总结
2015/04/27 职场文书
Sql-Server数据库单表查询 4.3实验课
2021/04/05 SQL Server
Python实现简繁体转换
2021/06/07 Python
手把手教你导入Go语言第三方库
2021/08/04 Golang
十大最强奥特曼武器:怪兽战斗仪在榜,第五奥特之父只使用过一次
2022/03/18 日漫