使用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实现依次输入input自动定焦
Dec 23 Javascript
JavaScript中的关联数组问题
Mar 04 Javascript
3个可以改善用户体验的AngularJS指令介绍
Jun 18 Javascript
基于JavaScript实现轮播图原理及示例
Apr 10 Javascript
Angular 2 ngForm中的ngModel、[ngModel]和[(ngModel)]的写法
Jun 29 Javascript
实现jquery放大镜的两种方法
Feb 22 jQuery
原生JavaScript实现todolist功能
Mar 02 Javascript
vue基于两个计算属性实现选中和全选功能示例
Feb 08 Javascript
js验证密码强度解析
Mar 18 Javascript
vue 单页应用和多页应用的优劣
Oct 22 Javascript
在vue中嵌入外部网站的实现
Nov 13 Javascript
用JS写一个发布订阅模式
Nov 07 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
php数据结构 算法(PHP描述) 简单选择排序 simple selection sort
2011/08/09 PHP
php多文件上传下载示例分享
2014/02/20 PHP
php加密解密字符串示例
2016/10/13 PHP
php 删除一维数组中某一个值元素的操作方法
2018/02/01 PHP
php面向对象重点知识分享
2019/09/27 PHP
聊聊 PHP 8 新特性 Attributes
2020/08/19 PHP
php如何实现数据库的备份和恢复
2020/11/30 PHP
原生js拖拽(第一课 未兼容)拖拽思路
2013/03/29 Javascript
使用JavaScript 实现对象 匀速/变速运动的方法
2013/05/08 Javascript
JS:window.onload的使用介绍
2013/11/13 Javascript
JavaScript实现多维数组的方法
2013/11/20 Javascript
JavaScript类属性的访问方式详解
2014/02/11 Javascript
jQuery关键词说明插件cluetip使用指南
2015/04/21 Javascript
由浅入深讲解Javascript继承机制与simple-inheritance源码分析
2015/12/13 Javascript
Bootstrap树形组件jqTree的简单封装
2016/01/25 Javascript
jQuery获取某天的农历日期并判断是否除夕或新年的方法
2016/03/01 Javascript
Extjs实现下拉菜单效果
2016/04/01 Javascript
Vue.js tab实现选项卡切换
2017/05/16 Javascript
使用react-router4.0实现重定向和404功能的方法
2017/08/28 Javascript
微信小程序实现星级评分和展示
2018/07/05 Javascript
使用Vue开发自己的Chrome扩展程序过程详解
2019/06/21 Javascript
Python打印输出数组中全部元素
2018/03/13 Python
python实现简单淘宝秒杀功能
2018/05/03 Python
Python3 获取一大段文本之间两个关键字之间的内容方法
2018/10/11 Python
解决python3捕获cx_oracle抛出的异常错误问题
2018/10/18 Python
python hook监听事件详解
2018/10/25 Python
Python变量类型知识点总结
2019/02/18 Python
写演讲稿要注意的六件事
2014/01/14 职场文书
致100米运动员广播稿
2014/02/14 职场文书
超市国庆节促销方案
2014/02/20 职场文书
通信工程求职信
2014/07/16 职场文书
个人汇报材料范文
2014/12/30 职场文书
银行实习推荐信
2015/03/27 职场文书
2019已经过半,你知道年中工作总结该怎么写吗?
2019/07/03 职场文书
导游词之昭君岛
2020/01/17 职场文书
【海涛DOTA】D-cup邀请赛NV.cn vs DT.Love
2022/04/01 DOTA