编程 Javascript

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实现计算器功能

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

vue实现计算器功能

- Author -

ali是个小太阳

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

javascript实现仿银行密码输入框效果的代码

Dec 13 Javascript

google jQuery 引用文件,jQuery 引用地址集合(jquery 1.2.6至jquery1.5.2)

Apr 24 Javascript

JavaScript使用cookie记录临时访客信息的方法

Apr 07 Javascript

由浅入深剖析Angular表单验证

Jul 14 Javascript

微信jssdk用法汇总

Jul 16 Javascript

js事件冒泡、事件捕获和阻止默认事件详解

Aug 04 Javascript

jQuery插件ajaxFileUpload异步上传文件

Oct 19 Javascript

JavaScript用JSONP跨域请求数据实例详解

Jan 06 Javascript

JS获取子节点、父节点和兄弟节点的方法实例总结

Jul 06 Javascript

小程序自定义组件实现城市选择功能

Jul 18 Javascript

微信小程序实现跑马灯效果

Oct 21 Javascript

layui关闭层级、简单监听的实例

Sep 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