vue实现计算器功能


Posted in Javascript onFebruary 22, 2020

本文实例为大家分享了vue实现计算器功能的具体代码,供大家参考,具体内容如下

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>计算器</title>
 <script src="https://unpkg.com/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="calc">
 <input type="text" v-model="result">
</div>
<script>
new Vue({
 el: '#app',
 data: {
  n1: 0,
  n2: 0,
  result: 0,
  opt: '+'
 },
 methods: {
  calc() {
   switch (this.opt) {
    case "+":
     this.result = parseInt(this.n1) + parseInt(this.n2);
     break;
    case "-":
     this.result = parseInt(this.n1) - parseInt(this.n2);
     break;
    case "*":
     this.result = parseInt(this.n1) * parseInt(this.n2);
     break;
    case "/":
     this.result = parseInt(this.n1) / parseInt(this.n2);
     break;
   }
  }
 }
})
</script>
</body>
</html>

效果图:

vue实现计算器功能

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery $.each() 使用小探
Aug 23 Javascript
jQuery让控件左右移动的三种实现方法
Sep 08 Javascript
在JavaScript中call()与apply()区别
Jan 22 Javascript
利用jQuery实现CheckBox全选/全不选/反选的简单代码
May 31 Javascript
避免jQuery名字冲突 noConflict()方法
Jul 30 Javascript
jquery实现input框获取焦点的简单实例
Jan 26 Javascript
js学习总结之DOM2兼容处理重复问题的解决方法
Jul 27 Javascript
js获取html页面代码中图片地址的实现代码
Mar 05 Javascript
vue-cli项目配置多环境的详细操作过程
Oct 30 Javascript
Angular6使用forRoot() 注册单一实例服务问题
Aug 27 Javascript
Node.js控制台彩色输出的方法与原理实例详解
Dec 01 Javascript
深入webpack打包原理及loader和plugin的实现
May 06 Javascript
js实现网页版贪吃蛇游戏
Feb 22 #Javascript
微信小程序 bindtap 传参的实例代码
Feb 21 #Javascript
leaflet加载geojson叠加显示功能代码
Feb 21 #Javascript
JavaScript中this函数使用实例解析
Feb 21 #Javascript
如何通过JS实现转码与解码
Feb 21 #Javascript
TensorFlow.js 微信小程序插件开始支持模型缓存的方法
Feb 21 #Javascript
微信小程序使用 vant Dialog组件的正确方式
Feb 21 #Javascript
You might like
PHP数组及条件,循环语句学习
2012/11/11 PHP
php调用Google translate_tts api实现代码
2013/08/07 PHP
使用php完成常见的文件上传功能(推荐)
2017/01/13 PHP
yii2 url重写并隐藏index.php方法
2018/12/10 PHP
JSQL 基于客户端的成绩统计实现方法
2010/05/05 Javascript
jquery的ajax请求全面了解
2013/03/20 Javascript
javascript和jquery修改a标签的href属性
2013/12/16 Javascript
jQuery操作CheckBox的方法介绍(选中,取消,取值)
2014/02/04 Javascript
Javascript高级技巧分享
2014/02/25 Javascript
javascript自定义的addClass()方法
2014/05/28 Javascript
javascript里使用php代码实例
2014/12/13 Javascript
jQuery使用fadeout实现元素渐隐效果的方法
2015/03/27 Javascript
分享js粘帖屏幕截图到web页面插件screenshot-paste
2020/08/21 Javascript
javascript动画之模拟拖拽效果篇
2016/09/26 Javascript
jQuery中delegate()方法的用法详解
2016/10/13 Javascript
实例解析js中try、catch、finally的执行规则
2017/02/24 Javascript
Angular5集成eventbus的示例代码
2018/07/19 Javascript
jQuery选择器之基本选择器用法实例分析
2019/02/19 jQuery
原生JavaScript实现弹幕组件的示例代码
2020/10/12 Javascript
[01:04:48]VGJ.S vs TNC Supermajor 败者组 BO3 第一场 6.6
2018/06/07 DOTA
python将ansible配置转为json格式实例代码
2017/05/15 Python
python 控制Asterisk AMI接口外呼电话的例子
2019/08/08 Python
python实现自动化报表功能(Oracle/plsql/Excel/多线程)
2019/12/02 Python
pytorch实现Tensor变量之间的转换
2020/02/17 Python
Python Websocket服务端通信的使用示例
2020/02/25 Python
学python爬虫能做什么
2020/07/29 Python
学习Python需要哪些工具
2020/09/04 Python
Numpy(Pandas)删除全为零的列的方法
2020/09/11 Python
基于Python的接口自动化unittest测试框架和ddt数据驱动详解
2021/01/27 Python
Python制作运行进度条的实现效果(代码运行不无聊)
2021/02/24 Python
HTML5 Canvas 起步(1) - 基本概念
2009/05/12 HTML / CSS
加拿大购物频道:The Shopping Channel
2016/07/21 全球购物
渔夫的故事教学反思
2014/02/14 职场文书
一帮一活动总结
2014/05/08 职场文书
倡议书格式模板
2014/05/13 职场文书
2014年乡镇纪委工作总结
2014/12/19 职场文书