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 相关文章推荐
jquery $(this).attr $(this).val方法使用介绍
Oct 08 Javascript
JS保留两位小数,多位小数的示例代码
Jan 07 Javascript
JavaScript获取当前页面上的指定对象示例代码
Feb 28 Javascript
深入理解JavaScript系列(17):面向对象编程之概论详细介绍
Mar 04 Javascript
JavaScript 常见安全漏洞和自动化检测技术
Aug 21 Javascript
JS代码实现table数据分页效果
May 26 Javascript
利用HBuilder打包前端开发webapp为apk的方法
Nov 13 Javascript
vue中eventbus被多次触发以及踩过的坑
Dec 02 Javascript
浅谈React组件之性能优化
Mar 02 Javascript
Vue实现按钮旋转和移动位置的实例代码
Aug 09 Javascript
vue 组件销毁并重置的实现
Jan 13 Javascript
React如何创建组件
Jun 27 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 和 MySQL 开发的 8 个技巧
2006/10/09 PHP
如何分别全角和半角以避免乱码
2006/10/09 PHP
追求程序速度,而不是编程的速度
2008/04/23 PHP
PHP stripos()函数及注意事项的分析
2013/06/08 PHP
遍历指定目录,并存储目录内所有文件属性信息的php代码
2016/10/28 PHP
thinkPHP中volist标签用法示例
2016/12/06 PHP
ThinkPHP框架分布式数据库连接方法详解
2017/03/14 PHP
PHP使用curl_multi_select解决curl_multi网页假死问题的方法
2018/08/15 PHP
在Laravel中使用GuzzleHttp调用第三方服务的API接口代码
2019/10/15 PHP
用jscript启动sqlserver
2007/06/21 Javascript
javascript js cookie的存储,获取和删除
2007/12/29 Javascript
JavaScript Konami Code 实现代码
2009/07/29 Javascript
js密码强度检测
2016/01/07 Javascript
javascript创建对象的几种模式介绍
2016/05/06 Javascript
JQuery.validate在ie8下不支持的快速解决方法
2016/05/18 Javascript
JS实现简单的右下角弹出提示窗口完整实例
2016/06/21 Javascript
jQuery控制元素隐藏和显示
2017/03/03 Javascript
axios 处理 302 状态码的解决方法
2018/04/10 Javascript
[01:45]绝对公平!DOTA2队长征召模式详解
2014/04/25 DOTA
Python统计日志中每个IP出现次数的方法
2015/07/06 Python
Python实现字典依据value排序
2016/02/24 Python
浅谈scrapy 的基本命令介绍
2017/06/13 Python
Python中支持向量机SVM的使用方法详解
2017/12/26 Python
python @property的用法及含义全面解析
2018/02/01 Python
对python requests的content和text方法的区别详解
2018/10/11 Python
python3 打开外部程序及关闭的示例
2018/11/06 Python
python代码xml转txt实例
2020/03/10 Python
python中 _、__、__xx__()区别及使用场景
2020/06/30 Python
python 基于opencv操作摄像头
2020/12/24 Python
Html5剪切板功能的实现代码
2018/06/29 HTML / CSS
HEMA法国:荷兰原创设计
2019/02/21 全球购物
实习生个人找工作的自我评价
2013/10/30 职场文书
难以忽视的真相观后感
2015/06/05 职场文书
《黄道婆》教学反思
2016/02/22 职场文书
python中的3种定义类方法
2021/11/27 Python
PyTorch device与cuda.device用法
2022/04/03 Python