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中的匀速运动和变速(缓冲)运动详细介绍
Nov 11 Javascript
Jquery封装tab自动切换效果的具体实现
Jul 13 Javascript
使用jquery的ajax需要注意的地方dataType的设置
Aug 12 Javascript
使用js实现雪花飘落效果
Aug 26 Javascript
jquery自动将form表单封装成json的具体实现
Mar 17 Javascript
JavaScript父子窗体间的调用方法
Mar 31 Javascript
jQuery团购倒计时特效实现方法
May 07 Javascript
Javascript通过overflow控制列表闭合与展开的方法
May 15 Javascript
实例详解jQuery的无new构建
Aug 02 Javascript
jQuery插件HighCharts绘制的2D堆柱状图效果示例【附demo源码下载】
Mar 14 Javascript
webpack处理 css\less\sass 样式的方法
Aug 21 Javascript
javascript中神奇的 Date对象小结
Oct 12 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
Ajax PHP 边学边练 之三 数据库
2009/11/26 PHP
浅析is_writable的php实现
2013/06/18 PHP
php实现html标签闭合检测与修复方法
2015/07/09 PHP
Zend Framework实现留言本分页功能(附demo源码下载)
2016/03/22 PHP
中高级PHP程序员应该掌握哪些技术?
2016/09/23 PHP
PHP 7安装使用体验之性能大提升,兼容性强,扩展支持不够(升级PHP要谨慎)
2017/07/27 PHP
PHP CURL使用详解
2019/03/21 PHP
ie和firefox不兼容的解决方法集合
2009/04/28 Javascript
JavaScript DOM 学习第五章 表单简介
2010/02/19 Javascript
基于jquery的气泡提示效果
2010/05/31 Javascript
jquery队列queue与原生模仿其实现方法分享
2014/03/25 Javascript
在Linux上用forever实现Node.js项目自启动
2014/07/09 Javascript
node.js中的fs.rmdir方法使用说明
2014/12/16 Javascript
JavaScript获取表格(table)当前行的值、删除行、增加行
2015/07/03 Javascript
JS密码生成与强度检测完整实例(附demo源码下载)
2016/04/06 Javascript
jQuery 3.0十大新特性
2016/07/06 Javascript
原生js简单实现放大镜特效
2017/05/16 Javascript
js实现删除li标签一行内容
2019/04/16 Javascript
nest.js 使用express需要提供多个静态目录的操作方法
2019/10/24 Javascript
jQuery实现评论模块
2020/08/19 jQuery
python实现可将字符转换成大写的tcp服务器实例
2015/04/29 Python
详细解析Python中的变量的数据类型
2015/05/13 Python
python中验证码连通域分割的方法详解
2018/06/04 Python
python实现屏保计时器的示例代码
2018/08/08 Python
docker-py 用Python调用Docker接口的方法
2019/08/30 Python
Python 线程池用法简单示例
2019/10/02 Python
Pandas操作CSV文件的读写实现方法
2019/11/13 Python
浅析python 定时拆分备份 nginx 日志的方法
2020/04/27 Python
澳洲网红粉泥面膜:Sand & Sky
2019/08/13 全球购物
英国屋顶用品和材料超市:Roofing Supplies UK
2019/08/24 全球购物
.NET面试问题集
2015/12/08 面试题
校园公益广告语
2014/03/13 职场文书
实习单位鉴定评语
2014/04/26 职场文书
医疗器械售后服务承诺书
2014/05/21 职场文书
行政上诉状范文
2015/05/23 职场文书
详细聊一聊mysql的树形结构存储以及查询
2022/04/05 MySQL