使用Vue实现简单计算器


Posted in Javascript onFebruary 25, 2020

使用Vue编写简单计算器,供大家参考,具体内容如下

在Vue中,v-model 指令,可以实现表单元素和 Model 中数据的双向数据绑定,接下来,我们就用这个指令编写一个简单的计算器,代码如下

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<!--计算器的显示结构-->
<div id="app">
 <input type="text" v-model="n1">
 <select v-model="opt">
  <option value="+">+</option>
  <option value="-">-</option>
  <option value="*">*</option>
  <option value="/">/</option>
 </select>
 <input type="text" v-model="n2">
 <input type="button" value="=" @click="calculator">
 <input type="text" v-model="result">
</div>

<script>
 // 创建 Vue 实例,得到 ViewModel,简写vm
 var vm = new Vue({
  el: '#app',
  data: {
   n1: 0,
   n2: 0,
   opt: '+',
   result: 0
  },
  methods: {
   //计算的方法
   calculator() {
    switch (this.opt) {
     case '+':
      this.result = Number(this.n1) + Number(this.n2);
      break;
     case '-':
      this.result = Number(this.n1) - Number(this.n2);
      break;
     case '*':
      this.result = Number(this.n1) * Number(this.n2);
      break;
     case '/':
      this.result = Number(this.n1) / Number(this.n2);
      break;
    }
   }
  }
 });
</script>
</body>
</html>

运行结果如下:

使用Vue实现简单计算器

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript整除实现代码
Nov 23 Javascript
js日期时间补零的小例子
Mar 05 Javascript
jQuery实现视频作为全屏幕背景
Dec 18 Javascript
js判断是否按下了Shift键的方法
Jan 27 Javascript
常常会用到的截取字符串substr()、substring()、slice()方法详解
Dec 16 Javascript
微信小程序 动态传参实例详解
Apr 27 Javascript
关于javascript获取内联样式与嵌入式样式的实例
Jun 01 Javascript
Bootstrap Tooltip显示换行和左对齐的解决方案
Oct 11 Javascript
jquery 输入框查找关键字并提亮颜色的实例代码
Jan 23 jQuery
vuejs项目打包之后的首屏加载优化及打包之后出现的问题
Apr 01 Javascript
详解在微信小程序的JS脚本中使用Promise来优化函数处理
Mar 06 Javascript
每天学点Vue源码之vm.$mount挂载函数
Mar 11 Javascript
详解vue beforeEach 死循环问题解决方法
Feb 25 #Javascript
Vue实现简易计算器
Feb 25 #Javascript
js+canvas实现简单扫雷小游戏
Jan 22 #Javascript
Vue常用传值方式、父传子、子传父及非父子实例分析
Feb 24 #Javascript
es6中let和const的使用方法详解
Feb 24 #Javascript
jquery制作的移动端购物车效果完整示例
Feb 24 #jQuery
jquery实现的放大镜效果示例
Feb 24 #jQuery
You might like
火车头discuz6.1 完美采集的php接口文件
2009/09/13 PHP
一个简单的php加密解密函数(动态加密)
2013/06/19 PHP
利用switch语句进行多选一判断的实例代码
2016/11/14 PHP
php文件上传 你真的掌握了吗
2016/11/28 PHP
详解Laravel服务容器的绑定与解析
2019/11/05 PHP
javascript学习随笔(使用window和frame)的技巧
2007/03/08 Javascript
JQuery页面图片切换和新闻列表滚动效果的具体实现
2013/09/26 Javascript
浅谈javascript中基本包装类型
2015/06/03 Javascript
Bootstrap与KnockoutJs相结合实现分页效果实例详解
2016/05/03 Javascript
JSP基于Bootstrap分页显示实例解析
2016/06/12 Javascript
Jquery调用iframe父页面中的元素及方法
2016/08/23 Javascript
js实现增加数字显示的环形进度条效果
2017/02/05 Javascript
node使用UEditor富文本编辑器的方法实例
2017/07/11 Javascript
详解基于Vue+Koa的pm2配置
2017/10/24 Javascript
解决vue打包项目后刷新404的问题
2018/03/06 Javascript
Python版实现微信公众号扫码登陆
2020/05/28 Javascript
vue使用Sass时报错问题的解决方法
2020/10/14 Javascript
ES6 十大特性简介
2020/12/09 Javascript
[01:21]DOTA2新纪元-7.0新版本即将开启!
2016/12/11 DOTA
python 控制语句
2011/11/03 Python
利用Python获取赶集网招聘信息前篇
2016/04/18 Python
详解使用python的logging模块在stdout输出的两种方法
2017/05/17 Python
使用Python向DataFrame中指定位置添加一列或多列的方法
2019/01/29 Python
python selenium 查找隐藏元素 自动播放视频功能
2019/07/24 Python
pytorch 利用lstm做mnist手写数字识别分类的实例
2020/01/10 Python
Python 字典中的所有方法及用法
2020/06/10 Python
如何表示python中的相对路径
2020/07/08 Python
eBay美国官网:eBay.com
2020/10/24 全球购物
中式结婚主持词
2014/03/14 职场文书
社区助残日活动总结
2014/08/29 职场文书
2014年学校法制宣传日活动总结
2014/11/01 职场文书
工作失职检讨书
2015/01/26 职场文书
社区工作者个人总结
2015/02/28 职场文书
优秀党员主要事迹范文
2015/11/05 职场文书
李清照的诗词赏析(20首)
2019/08/22 职场文书
Java面试题冲刺第十七天--基础篇3
2021/08/07 面试题