使用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中Eval函数的使用说明
Oct 11 Javascript
jQuery 设置 CSS 属性示例介绍
Jan 16 Javascript
你未必知道的JavaScript和CSS交互的5种方法
Apr 02 Javascript
js delete 用法(删除对象属性及变量)
Aug 24 Javascript
跟我学习javascript的this关键字
May 28 Javascript
分分钟玩转Vue.js组件
Oct 25 Javascript
JS查找字符串中出现最多的字符及个数统计
Feb 04 Javascript
jQuery+ajax读取json数据并按照价格排序示例
Mar 28 jQuery
在vue中v-bind使用三目运算符绑定class的实例
Sep 29 Javascript
js常见遍历操作小结
Jun 06 Javascript
JS+CSS实现随机点名(实例代码)
Nov 04 Javascript
Vue v-bind动态绑定class实例方法
Jan 15 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+MYSQL的文章管理系统(二)
2006/10/09 PHP
php smarty的预保留变量总结
2008/12/04 PHP
PHP 抓取新浪读书频道的小说并生成txt电子书的代码
2009/12/18 PHP
PHP程序级守护进程的实现与优化的使用概述
2013/05/02 PHP
php中动态调用函数的方法
2015/03/16 PHP
SESSION存放在数据库用法实例
2015/08/08 PHP
Iframe 自适应高度并实时监控高度变化的js代码
2009/10/30 Javascript
js 全兼容可高亮二级缓冲折叠菜单
2010/06/04 Javascript
Tab切换组件(选项卡功能)实例代码
2013/11/21 Javascript
原生javaScript做得动态表格(注释写的很清楚)
2013/12/29 Javascript
javascript history对象(历史记录)使用方法(实现浏览器前进后退)
2014/01/07 Javascript
Windows 系统下安装和部署Egret的开发环境
2014/07/31 Javascript
【经典源码收藏】jQuery实用代码片段(筛选,搜索,样式,清除默认值,多选等)
2016/06/07 Javascript
深入理解jQuery()方法的构建原理
2016/12/05 Javascript
selenium 与 chrome 进行qq登录并发邮件操作实例详解
2017/04/06 Javascript
详解Vue学习笔记进阶篇之列表过渡及其他
2017/07/17 Javascript
vue.js父子组件通信动态绑定的实例
2018/09/28 Javascript
JavaScript简单实现的仿微博留言功能示例
2019/01/17 Javascript
Vue 使用计时器实现跑马灯效果的实例代码
2019/07/11 Javascript
解决VUE自定义拖拽指令时 onmouseup 与 click事件冲突问题
2020/07/24 Javascript
vue全局使用axios的操作
2020/09/08 Javascript
[03:10]超级美酒第四天 fy拉比克秀 大合集
2018/06/05 DOTA
Python实现冒泡,插入,选择排序简单实例
2014/08/18 Python
python操作mysql中文显示乱码的解决方法
2014/10/11 Python
Python爬虫爬取美剧网站的实现代码
2016/09/03 Python
学生如何注册Pycharm专业版以及pycharm的安装
2020/09/24 Python
美国著名的婴儿学步鞋老品牌:Robeez
2016/08/20 全球购物
全球高级音频和视频专家:HiDef Lifestyle
2019/08/02 全球购物
俄罗斯购买内衣网站:Trusiki
2020/08/22 全球购物
体育老师的教学自我评价分享
2013/11/19 职场文书
中学门卫岗位职责
2013/12/26 职场文书
学雷锋志愿服务月活动总结
2014/03/09 职场文书
会计学习心得体会
2014/09/09 职场文书
教师自我剖析材料(四风问题)
2014/09/30 职场文书
山楂树之恋观后感
2015/06/11 职场文书
Python进阶学习之带你探寻Python类的鼻祖-元类
2021/05/08 Python