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 相关文章推荐
Prototype 工具函数 学习
Jul 23 Javascript
通过继承IHttpHandle实现JS插件的组织与管理
Jul 13 Javascript
Jquery中dialog属性小记
Sep 03 Javascript
Jquery为a标签的href赋值实现代码
May 03 Javascript
javascript设置连续两次点击按钮时间间隔的方法
Oct 28 Javascript
javascript中indexOf技术详解
May 07 Javascript
react性能优化达到最大化的方法 immutable.js使用的必要性
Mar 09 Javascript
详解vue表单验证组件 v-verify-plugin
Apr 19 Javascript
详解JavaScript调用栈、尾递归和手动优化
Jun 03 Javascript
脚手架vue-cli工程webpack的基本用法详解
Sep 29 Javascript
详解如何在Node.js的httpServer中接收前端发送的arraybuffer数据
Nov 11 Javascript
如何测量vue应用运行时的性能
Jun 21 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连接MySQL代码的参数说明
2008/06/07 PHP
用php随机生成福彩双色球号码的2种方法
2013/02/04 PHP
PHP时间格式控制符对照表分享
2013/07/23 PHP
使用ThinkPHP+Uploadify实现图片上传功能
2014/06/26 PHP
使用CSS3实现字体颜色渐变的实现
2021/03/09 HTML / CSS
jqPlot Option配置对象详解
2009/07/25 Javascript
让IE6支持min-width和max-width的方法
2010/06/25 Javascript
一个支持任意尺寸的图片上下左右滑动效果
2014/08/24 Javascript
简单讲解jQuery中的子元素过滤选择器
2016/04/18 Javascript
详谈js中数组(array)和对象(object)的区别
2017/02/27 Javascript
JS与jQuery判断文本框还剩多少字符可以输入的方法
2018/09/01 jQuery
vue-cli2.0转3.0之项目搭建的详细步骤
2018/12/11 Javascript
JavaScript使用localStorage存储数据
2019/09/25 Javascript
vue3实现v-model原理详解
2019/10/09 Javascript
vue项目初始化到登录login页面的示例
2019/10/31 Javascript
Vue中fragment.js使用方法小结
2020/02/17 Javascript
分享15个最受欢迎的Python开源框架
2014/07/13 Python
Python基于twisted实现简单的web服务器
2014/09/29 Python
python基于queue和threading实现多线程下载实例
2014/10/08 Python
Python常用库推荐
2016/12/04 Python
python下setuptools的安装详解及No module named setuptools的解决方法
2017/07/06 Python
python实现远程通过网络邮件控制计算机重启或关机
2018/02/22 Python
Pycharm导入Python包,模块的图文教程
2018/06/13 Python
python实战教程之自动扫雷
2018/07/13 Python
解决Pandas的DataFrame输出截断和省略的问题
2019/02/08 Python
Pytest参数化parametrize使用代码实例
2020/02/22 Python
python列表切片和嵌套列表取值操作详解
2020/02/27 Python
Python matplotlib绘制图形实例(包括点,曲线,注释和箭头)
2020/04/17 Python
HTML5探秘:用requestAnimationFrame优化Web动画
2018/06/03 HTML / CSS
韩国三大免税店之一:THE GRAND 中文免税店
2016/07/21 全球购物
元宵晚会主持词
2014/03/25 职场文书
校长一岗双责责任书
2015/05/09 职场文书
2015年幼儿园学期工作总结
2015/05/22 职场文书
2016年社区“我们的节日·中秋节”活动总结
2016/04/05 职场文书
详解TypeScript中的类型保护
2021/04/29 Javascript
Mysql数据库事务的脏读幻读及不可重复读详解
2022/05/30 MySQL