使用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_01_理解内存分配原理分析
Oct 11 Javascript
IE6、IE7中setAttribute不支持class/for/rowspan/colspan等属性
Aug 28 Javascript
2012年开发人员的16款新鲜的jquery插件体验分享
Dec 28 Javascript
解决js数据包含加号+通过ajax传到后台时出现连接错误
Aug 01 Javascript
JS+flash实现chrome和ie浏览器下同时可以复制粘贴
Sep 22 Javascript
jquery选择器简述
Aug 31 Javascript
JavaScript iframe数据共享接口实现方法
Jan 06 Javascript
使用jQuery制作浮动工具栏的实例分享
May 13 Javascript
jQuery查看选中对象HTML代码的方法
Jun 17 Javascript
原生js实现点击按钮复制内容到剪切板
Nov 19 Javascript
如何在现代JavaScript中编写异步任务
Jan 31 Javascript
vue-element-admin项目导入和导出的实现
May 21 Vue.js
详解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
JAVA/JSP学习系列之七
2006/10/09 PHP
PHP缩略图等比例无损压缩,可填充空白区域补充色
2011/06/10 PHP
php 检查电子邮件函数(自写)
2014/01/16 PHP
PHP简单判断手机设备的方法
2016/08/23 PHP
基于PHP实现的多元线性回归模拟曲线算法
2018/01/30 PHP
“不能执行已释放的Script代码”错误的原因及解决办法
2007/09/09 Javascript
JavaScript this 深入理解
2009/07/30 Javascript
jquery 插件实现图片延迟加载效果代码
2010/02/06 Javascript
纯CSS打造的导航菜单(附jquery版)
2010/08/07 Javascript
JavaScript中的私有/静态属性介绍
2012/07/26 Javascript
简易的投票系统以及js刷票思路和方法
2015/04/07 Javascript
JavaScript对数组进行随机重排的方法
2015/07/22 Javascript
javascript 判断两个日期之差的示例代码
2015/09/05 Javascript
详解Angular中$cacheFactory缓存的使用
2016/08/19 Javascript
JS实现自动阅读单词(有道单词本添加功能)
2016/11/14 Javascript
JS实现太极旋转思路分析
2016/12/09 Javascript
微信小程序 空白页重定向解决办法
2017/06/27 Javascript
js链表操作(实例讲解)
2017/08/29 Javascript
JavaScript事件委托实现原理及优点进行
2020/08/29 Javascript
[01:06:26]全国守擂赛第二周 Team Coach vs DeMonsTer
2020/04/28 DOTA
批处理与python代码混合编程的方法
2016/05/19 Python
深入理解Python爬虫代理池服务
2018/02/28 Python
Python交互环境下实现输入代码
2018/06/22 Python
Python如何获得百度统计API的数据并发送邮件示例代码
2019/01/27 Python
OpenCV+face++实现实时人脸识别解锁功能
2019/08/28 Python
基于Pycharm加载多个项目过程图解
2020/01/19 Python
keras Lambda自定义层实现数据的切片方式,Lambda传参数
2020/06/11 Python
Python实时监控网站浏览记录实现过程详解
2020/07/14 Python
python属于哪种语言
2020/08/16 Python
html5 Canvas画图教程(3)—canvas出现1像素线条模糊不清的原因
2013/01/09 HTML / CSS
ruby如何进行集成操作?Ruby能进行多重继承吗?
2013/10/16 面试题
篮球友谊赛通讯稿
2014/10/10 职场文书
单位单身证明样本
2014/10/11 职场文书
领导走群众路线整改措施思想汇报
2014/10/12 职场文书
食品仓管员岗位职责
2015/04/01 职场文书
SpringBoot集成Redis的思路详解
2021/10/16 Redis