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 相关文章推荐
网页里控制图片大小的相关代码
Jun 25 Javascript
锋利的jQuery 第三章章节总结的例子
Mar 23 Javascript
textarea中的手动换行处理的jquery代码
Feb 26 Javascript
js校验表单后提交表单的三种方法总结
Feb 28 Javascript
浅析Javascript中“==”与“===”的区别
Dec 23 Javascript
JS基于VML技术实现的五角星礼花效果代码
Oct 26 Javascript
Extjs 点击复选框在表格中增加相关信息行
Jul 12 Javascript
jQuery实现页面点击后退弹出提示框的方法
Aug 24 Javascript
JavaScript转换数据库DateTime字段类型方法
Jun 27 Javascript
vue中配置mint-ui报css错误问题的解决方法
Oct 11 Javascript
微信小程序之裁剪图片成圆形的实现代码
Oct 11 Javascript
Vue组件实现触底判断
Jun 26 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
WordPress中使主题支持小工具以及添加插件启用函数
2015/12/22 PHP
FleaPHP框架数据库查询条件($conditions)写法总结
2016/03/19 PHP
PHP判断一个数组是另一个数组子集的方法详解
2017/07/31 PHP
php写app用的框架整理
2019/09/29 PHP
JQuery拖拽元素改变大小尺寸实现代码
2012/12/10 Javascript
jquery弹出框的用法示例(一)
2013/08/26 Javascript
Javascript获取当前日期的农历日期代码
2014/10/08 Javascript
深入理解JavaScript系列(22):S.O.L.I.D五大原则之依赖倒置原则DIP详解
2015/03/05 Javascript
FullCalendar日历插件应用之数据展现(一)
2015/12/23 Javascript
JS全局变量和局部变量最新解析
2016/06/24 Javascript
详解Angular.js指令中scope类型的几种特殊情况
2017/02/21 Javascript
jQuery事件详解
2017/02/23 Javascript
使用vs code开发Nodejs程序的使用方法
2017/09/21 NodeJs
利用JS实现一个同Excel表现的智能填充算法
2018/08/13 Javascript
详解Vue中数组和对象更改后视图不刷新的问题
2018/09/21 Javascript
JS实现li标签的删除
2019/04/12 Javascript
vue.js路由mode配置之去掉url上默认的#方法
2019/11/01 Javascript
python通过邮件服务器端口发送邮件的方法
2015/04/30 Python
收藏整理的一些Python常用方法和技巧
2015/05/18 Python
python简单鼠标自动点击某区域的实例
2019/06/25 Python
python实现生成Word、docx文件的方法分析
2019/08/30 Python
Django之全局使用request.user.username的实例详解
2020/05/14 Python
Python获取excel内容及相关操作代码实例
2020/08/10 Python
详解python3类型注释annotations实用案例
2021/01/20 Python
python3中celery异步框架简单使用+守护进程方式启动
2021/01/20 Python
Python 里最强的地图绘制神器
2021/03/01 Python
印度排名第一的蛋糕、鲜花和礼品送货:Winni
2019/08/02 全球购物
Farfetch中文官网:奢侈品牌时尚购物平台
2020/03/15 全球购物
请说出以下代码输出什么
2013/08/30 面试题
领导接待方案
2014/03/13 职场文书
党风廉政承诺书
2014/03/27 职场文书
2014领导班子四风问题查摆思想汇报
2014/09/13 职场文书
法院干警四风问题个人对照检查材料思想汇报
2014/10/07 职场文书
小学五一劳动节活动总结
2015/02/09 职场文书
pytorch加载预训练模型与自己模型不匹配的解决方案
2021/05/13 Python
电脑开机弹出documents文件夹怎么回事?弹出documents文件夹解决方法
2022/04/08 数码科技