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 相关文章推荐
ExtJs设置GridPanel表格文本垂直居中示例
Jul 15 Javascript
node中socket.io的事件使用详解
Dec 15 Javascript
基于jquery编写分页插件
Mar 07 Javascript
JQuery导航菜单选择特效
Apr 11 Javascript
第五章之BootStrap 栅格系统
Apr 25 Javascript
js前端实现多图图片上传预览的两个方法(推荐)
Nov 18 Javascript
微信小程序 textarea 组件详解及简单实例
Jan 10 Javascript
seajs模块压缩问题与解决方法实例分析
Oct 10 Javascript
微信小程序websocket实现即时聊天功能
May 21 Javascript
快速对接payjq的个人微信支付接口过程解析
Aug 15 Javascript
JS自定义对象创建与简单使用方法示例
Jan 15 Javascript
bootstrap-paginator服务器端分页使用方法详解
Feb 13 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开源建站平台小结
2010/04/22 PHP
PHP定时自动生成静态HTML的实现代码
2010/06/20 PHP
解析php中curl_multi的应用
2013/07/17 PHP
19个Android常用工具类汇总
2014/12/30 PHP
php中异常处理方法小结
2015/01/09 PHP
php判断用户是否手机访问代码
2015/06/08 PHP
YII动态模型(动态表名)支持分析
2016/03/29 PHP
php中strlen和mb_strlen用法实例分析
2016/11/12 PHP
PHP实现基于PDO扩展连接PostgreSQL对象关系数据库示例
2018/03/31 PHP
Ext grid 添加右击菜单
2009/11/26 Javascript
网站内容禁止复制和粘贴、另存为的js代码
2014/02/26 Javascript
三种方式获取XMLHttpRequest对象
2014/04/21 Javascript
jquery 为a标签绑定click事件示例代码
2014/06/23 Javascript
javascript删除一个html元素节点的方法
2014/12/20 Javascript
jquery中EasyUI实现异步树
2015/03/01 Javascript
Javascript使用uploadify来实现多文件上传
2016/11/16 Javascript
jquery+html仿翻页相册功能
2016/12/20 Javascript
JS实现区分中英文并统计字符个数的方法示例
2018/06/09 Javascript
对Vue.js之事件的绑定(v-on: 或者 @ )详解
2018/09/15 Javascript
vue src动态加载请求获取图片的方法
2018/10/17 Javascript
Koa 中的错误处理解析
2019/04/09 Javascript
JS函数基本定义与用法示例
2020/01/15 Javascript
ES6中new Function()语法及应用实例分析
2020/02/19 Javascript
python读取json文件并将数据插入到mongodb的方法
2015/03/23 Python
python实现名片管理系统
2018/11/29 Python
python多线程与多进程及其区别详解
2019/08/08 Python
用python生成与调用cntk模型代码演示方法
2019/08/26 Python
python 实现rolling和apply函数的向下取值操作
2020/06/08 Python
python调用win32接口进行截图的示例
2020/11/11 Python
用python制作个视频下载器
2021/02/01 Python
退伍老兵事迹材料
2014/01/31 职场文书
《故乡》教学反思
2014/04/10 职场文书
检讨书范文
2015/01/27 职场文书
法律进社区活动总结
2015/05/07 职场文书
培训学校2015年度工作总结
2015/07/20 职场文书
导游词之河北邯郸
2019/09/12 职场文书