使用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 密码强度判断代码
Sep 05 Javascript
写出更好的JavaScript之undefined篇(上)
Nov 22 Javascript
Grid得到选择行数据的方法总结
Jan 17 Javascript
改进UCHOME的记录发布,增强可访问性用户体验
Jan 17 Javascript
javascript限制文本框输入值类型的方法
May 07 Javascript
JavaScript截取指定长度字符串点击可以展开全部代码
Dec 04 Javascript
JS实现的表头列头固定页面功能示例
Jan 10 Javascript
bootstrap基本配置_动力节点Java学院整理
Jul 14 Javascript
javascript+html5+css3自定义弹出窗口效果
Oct 26 Javascript
使用Vuex解决Vue中的身份验证问题
Sep 28 Javascript
React倒计时功能实现代码——解耦通用
Sep 18 Javascript
vue 导航守卫和axios拦截器有哪些区别
Dec 19 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
PHP curl 并发最佳实践代码分享
2012/09/05 PHP
php发送get、post请求的6种方法简明总结
2014/07/08 PHP
五款PHP代码重构工具推荐
2014/10/14 PHP
PHP学习笔记(二):变量详解
2015/04/17 PHP
php轻松实现文件上传功能
2016/03/03 PHP
JavaScript For Beginners(转载)
2007/01/05 Javascript
JAVASCRIPT style 中visibility和display之间的区别
2010/01/22 Javascript
return false,对阻止事件默认动作的一些测试代码
2010/11/17 Javascript
JavaScript中“过于”犀利地for/in循环使用示例
2013/10/22 Javascript
Nodejs中读取中文文件编码问题、发送邮件和定时任务实例
2015/01/01 NodeJs
基于javascript实现右下角浮动广告效果
2016/01/08 Javascript
JavaScript判断表单为空及获取焦点的方法
2016/02/12 Javascript
node.js 中国天气预报 简单实现
2016/06/06 Javascript
nodejs基于express实现文件上传的方法
2018/03/19 NodeJs
解决vue无法设置滚动位置的问题
2018/10/07 Javascript
Vue中JS动画与Velocity.js的结合使用
2019/02/13 Javascript
重学JS之显示强制类型转换详解
2019/06/30 Javascript
原理深度解析Vue的响应式更新比React快
2020/04/04 Javascript
Python 3.x 连接数据库示例(pymysql 方式)
2017/01/19 Python
python开发利器之ulipad的使用实践
2017/03/16 Python
详解Python中的各种转义符\n\r\t
2019/07/10 Python
Django MEDIA的配置及用法详解
2019/07/25 Python
Python SSL证书验证问题解决方案
2020/01/13 Python
Python版中国省市经纬度
2020/02/11 Python
Python日志:自定义输出字段 json格式输出方式
2020/04/27 Python
Python脚本实现监听服务器的思路代码详解
2020/05/28 Python
Python基于gevent实现文件字符串查找器
2020/08/11 Python
CSS3 filter(滤镜)实现网页灰色或者黑色模式的示例代码
2021/02/24 HTML / CSS
SheIn沙特阿拉伯:女装在线
2020/03/23 全球购物
环境科学专业个人求职信
2013/09/26 职场文书
文明家庭先进事迹材
2014/01/27 职场文书
小学生家长评语集锦
2014/01/30 职场文书
KTV门卫岗位职责
2014/10/09 职场文书
社区法制宣传月活动总结
2015/05/07 职场文书
怎样评估创业计划书是否有可行性?
2019/08/07 职场文书
Python OpenGL基本配置方式
2022/05/20 Python