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 相关文章推荐
网页常用特效代码整理
Jun 23 Javascript
AngularJS入门心得之directive和controller通信过程
Jan 25 Javascript
原生JS实现-星级评分系统的简单实例
Aug 21 Javascript
浅谈Angular中ngModel的$render
Oct 24 Javascript
jQuery拖拽通过八个点改变div大小
Nov 29 Javascript
angularjs中的$eval方法详解
Apr 24 Javascript
JS抛物线动画实例制作
Feb 24 Javascript
Vue项目使用CDN优化首屏加载问题
Apr 01 Javascript
JS尾递归的实现方法及代码优化技巧
Jan 19 Javascript
微信实现自动跳转到用其他浏览器打开指定APP下载
Feb 15 Javascript
小程序封装wx.request请求并创建接口管理文件的实现
Apr 29 Javascript
vue 微信分享回调iOS和安卓回调出现错误的解决
Sep 07 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
人族 Terran 基本策略
2020/03/14 星际争霸
PHP 和 MySQL 基础教程(二)
2006/10/09 PHP
php运行出现Call to undefined function curl_init()的解决方法
2010/11/02 PHP
php验证手机号码(支持归属地查询及编码为UTF8)
2013/02/01 PHP
php常用字符串比较函数实例汇总
2014/11/24 PHP
php设计模式之单例模式代码
2016/06/11 PHP
PHP常用函数之获取汉字首字母功能示例
2019/10/21 PHP
Z-Blog中用到的js代码
2007/03/15 Javascript
javascript 冒号 使用说明
2009/06/06 Javascript
解决表单中第一个非隐藏的元素获得焦点的一个方案
2009/10/26 Javascript
jqGrid随窗口大小变化自适应大小的示例代码
2013/12/28 Javascript
jQuery设置和获取HTML、文本和值示例
2014/07/08 Javascript
JavaScript实现在标题栏上显示当前日期的方法
2015/03/19 Javascript
WordPress中利用AJAX技术进行评论提交的实现示例
2016/01/12 Javascript
使用javascript插入样式
2016/03/14 Javascript
基于JS代码实现图片在页面中旋转效果
2016/06/16 Javascript
最原始的jQuery注册验证方式
2016/10/11 Javascript
jQuery实现点击某个div打开层,点击其他div关闭层实例分析(阻止冒泡)
2016/11/18 Javascript
Vue学习笔记进阶篇之单元素过度
2017/07/19 Javascript
react native仿微信PopupWindow效果的实例代码
2017/08/07 Javascript
React Native 混合开发多入口加载方式详解
2019/09/23 Javascript
十分钟教你上手ES2020新特性
2020/02/12 Javascript
Vue + Node.js + MongoDB图片上传组件实现图片预览和删除功能详解
2020/04/29 Javascript
uniapp电商小程序实现订单30分钟倒计时
2020/11/01 Javascript
python实现在字符串中查找子字符串的方法
2015/07/11 Python
基于Python socket的端口扫描程序实例代码
2018/02/09 Python
python 设置xlabel,ylabel 坐标轴字体大小,字体类型
2019/07/23 Python
Python实现子类调用父类的初始化实例
2020/03/12 Python
Python爬虫之Selenium中frame/iframe表单嵌套页面
2020/12/04 Python
Html5剪切板功能的实现代码
2018/06/29 HTML / CSS
全球工业:Global Industrial
2020/02/01 全球购物
公司董事长职责
2013/12/12 职场文书
环境卫生工作汇报材料
2014/10/28 职场文书
导游词之山西关帝庙
2019/11/01 职场文书
利用Sharding-Jdbc进行分库分表的操作代码
2022/01/22 Java/Android
教你部署vue项目到docker
2022/04/05 Vue.js