使用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 相关文章推荐
ie 调试javascript的工具
Apr 29 Javascript
用jquery生成二级菜单的实例代码
Jun 24 Javascript
javascript中创建对象的几种方法总结
Nov 01 Javascript
jQuery实现的一个自定义Placeholder属性插件
Aug 11 Javascript
JQuery ztree带筛选、异步加载实例讲解
Feb 25 Javascript
Jquery 自定义事件实现发布/订阅的简单实例
Jun 12 Javascript
echarts3 使用总结(绘制各种图表,地图)
Jan 05 Javascript
Vuex 入门教程
Jan 10 Javascript
一个Vue视频媒体多段裁剪组件的实现示例
Aug 09 Javascript
前端防止用户重复提交js实现代码示例
Sep 07 Javascript
vue2中引用及使用 better-scroll的方法详解
Nov 15 Javascript
微信小程序实现人脸识别登陆的示例代码
Apr 02 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中用PDO查询Mysql来避免SQL注入风险的方法
2013/04/25 PHP
csdn 论坛技术区平均给分功能
2009/11/07 Javascript
jQuery实现随意改变div任意属性的名称和值(部分原生js实现)
2013/05/28 Javascript
Javascript实现简单二级下拉菜单实例
2014/06/15 Javascript
分享33个jQuery与CSS3实现的绚丽鼠标悬停效果
2014/12/15 Javascript
jQuery简单实现上下,左右滑动的方法
2016/06/01 Javascript
详解Vuejs2.0之异步跨域请求
2017/04/20 Javascript
了解javascript中let和var及const关键字的区别
2019/05/24 Javascript
JS+html5实现异步上传图片显示上传文件进度条功能示例
2019/11/09 Javascript
vue实现信息管理系统
2020/05/30 Javascript
vant 自定义 van-dropdown-item的用法
2020/08/05 Javascript
[01:02:54]完美世界DOTA2联赛PWL S2 FTD vs GXR 第一场 11.22
2020/11/26 DOTA
python使用urllib2提交http post请求的方法
2015/05/26 Python
Python实现大文件排序的方法
2015/07/10 Python
python开发之thread实现布朗运动的方法
2015/11/11 Python
Python中异常重试的解决方案详解
2017/05/05 Python
使用k8s部署Django项目的方法步骤
2019/01/14 Python
Python爬取数据保存为Json格式的代码示例
2019/04/09 Python
PyQt5重写QComboBox的鼠标点击事件方法
2019/06/25 Python
django url到views参数传递的实例
2019/07/19 Python
python模块如何查看
2020/06/16 Python
如何使用python-opencv批量生成带噪点噪线的数字验证码
2020/12/21 Python
python批量生成身份证号到Excel的两种方法实例
2021/01/14 Python
python实现经典排序算法的示例代码
2021/02/07 Python
Merrell美国官网:美国登山运动鞋品牌
2018/02/07 全球购物
80后职场人的职业生涯规划
2014/03/08 职场文书
党建工作先进材料
2014/05/02 职场文书
经济管理自荐书
2014/06/09 职场文书
人力资源职位说明书
2014/07/29 职场文书
邻里守望志愿服务活动方案
2014/08/15 职场文书
软件测试专业推荐信
2014/09/18 职场文书
2014年前台个人工作总结
2014/11/14 职场文书
党的群众路线教育实践活动先进个人材料
2014/12/24 职场文书
Python还能这么玩之只用30行代码从excel提取个人值班表
2021/06/05 Python
Java实现简易的分词器功能
2021/06/15 Java/Android
Python可变集合和不可变集合的构造方法大全
2021/12/06 Python