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入门教程(6) Window窗口对象
Jan 31 Javascript
JavaScript 验证码的实例代码(附效果图)
Mar 22 Javascript
jQuery - css() 方法示例详解
Jan 16 Javascript
基于JavaScript实现动态创建表格和增加表格行数
Dec 20 Javascript
jQuery实现百叶窗焦点图动画效果代码分享(附源码下载)
Mar 14 Javascript
每日十条JavaScript经验技巧(一)
Jun 23 Javascript
javascript中获取class的简单实现
Jul 12 Javascript
在JSP中如何实现MD5加密的方法
Nov 02 Javascript
jQuery实现复选框的全选和反选
Feb 02 Javascript
react-native 封装选择弹出框示例(试用ios&amp;android)
Jul 11 Javascript
改变vue请求过来的数据中的某一项值的方法(详解)
Mar 08 Javascript
关于vue中的ajax请求和axios包问题
Apr 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使用Jpgraph绘制饼状图的方法
2015/06/10 PHP
实例讲解php数据访问
2016/05/09 PHP
在Mac OS下搭建LNMP开发环境的步骤详解
2017/03/10 PHP
php基于Redis消息队列实现的消息推送的方法
2018/11/28 PHP
文本框获得焦点和失去焦点的判断代码
2012/03/18 Javascript
js原生appendChild的bug解决心得分享
2013/07/01 Javascript
三种检测iPhone/iPad设备方向的方法
2014/04/23 Javascript
node.js中的fs.writeFile方法使用说明
2014/12/14 Javascript
JS实现鼠标点击展开或隐藏表格行的方法
2015/03/03 Javascript
详解JavaScript中void语句的使用
2015/06/04 Javascript
javascript简单比较日期大小的方法
2016/01/05 Javascript
解决同一页面中两个iframe互相调用jquery,js函数的方法
2016/12/12 Javascript
jQuery使用正则表达式替换dom元素标签用法示例
2017/01/16 Javascript
支付宝小程序tabbar底部导航
2018/11/06 Javascript
JS实现导航栏楼层特效
2020/01/01 Javascript
Python Mysql数据库操作 Perl操作Mysql数据库
2009/01/12 Python
Python 列表list使用介绍
2014/11/30 Python
浅谈python中的实例方法、类方法和静态方法
2017/02/17 Python
django基础之数据库操作方法(详解)
2017/05/24 Python
python3 实现对图片进行局部切割的方法
2018/12/05 Python
详解pandas数据合并与重塑(pd.concat篇)
2019/07/09 Python
Python实现蒙特卡洛算法小实验过程详解
2019/07/12 Python
python实现输入任意一个大写字母生成金字塔的示例
2019/10/27 Python
德国Discount-Apotheke中文官网:DC德式康线上药房
2020/02/18 全球购物
Weblogc domain问题
2014/01/27 面试题
在浏览器端如何得到服务器端响应的XML数据
2012/11/24 面试题
美术教师自我鉴定
2014/02/12 职场文书
如何写自我评价?自我评价写什么好?
2014/03/14 职场文书
消防宣传口号
2014/06/16 职场文书
年终工作总结范文2014
2014/11/27 职场文书
2014年城市管理工作总结
2014/12/02 职场文书
违规违纪检讨书范文
2015/05/06 职场文书
python基础学习之递归函数知识总结
2021/05/26 Python
星际争霸:毕姥爷vs解冻03
2022/04/01 星际争霸
Golang流模式之grpc的四种数据流
2022/04/13 Golang
Python如何用re模块实现简易tokenizer
2022/05/02 Python