vue实现计算器功能

本文实例为大家分享了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>

效果图:

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

(0)

相关推荐

  • Vue.js实现价格计算器功能

    本文实例为大家分享了Vue.js实现价格计算器功能的具体代码,供大家参考,具体内容如下 实现效果: 实现代码及注释: <!DOCTYPE html> <html> <head> <title>价格计算器</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial

  • Vue.js实现立体计算器

    本文实例为大家分享了Vue.js 制作立体计算器的具体方法,供大家参考,具体内容如下 项目效果图 这是一个简单的项目实现加减乘除运算 项目结构 代码展示 计算器1.0.html <!DOCTYPE html> <html> <head> <title>计算器</title> <link rel="stylesheet" type="text/css" href="css/style.css&

  • vue.js实现的经典计算器/科学计算器功能示例

    本文实例讲述了vue.js实现的经典计算器/科学计算器功能.分享给大家供大家参考,具体如下: 1. HTML部分: <script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script> <div id="app"> <div class="calculator"> <button @click="changeMod

  • vue.js实现简单的计算器功能

    使用vue.js来编写一个简单的计算器,供大家参考,具体内容如下 效果如图所示:是一个十分简单的计算器,包含了加减乘除,不是用原生js写的,而是用vue.js写的 html: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div id="app"

  • Vue.js实现的计算器功能完整示例

    本文实例讲述了Vue.js实现的计算器功能.分享给大家供大家参考,具体如下: 1. HTML部分代码 <!DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" type="text/css" href="css/css.css" rel="external nofollow" > <sc

  • vue实现计算器功能

    本文实例为大家分享了vue实现计算器功能的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>计算器</title> <script src="https://unpkg.com/vue/dist/vue.js"></script>

  • vue实现简易的计算器功能

    本文实例为大家分享了vue实现简易计算器功能的具体代码,供大家参考,具体内容如下 实现功能:将两个输入框中的值进行加减乘除计算 用到的知识点: 1.v-model数据双向绑定 2. .number转化为数字 3.@click点击事件 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> //选择自己的vue位置 <script

  • 微信小程序实现计算器功能

    本文实例为大家分享了微信小程序实现计算器功能的具体代码,供大家参考,具体内容如下 一.微信小程序开发工具界面 二.目录结构 第一次进到页面它的目录结构如下: 三.需要注意的问题 (1)添加的新页面文件,都需要在app.json中进行配置,否则页面报错. (2)工作原理  通过在<view></view>中添加事件 bindtap="btnClick" id="{{n9}}"   相当于click事件. 在js代码中,可以通过this.data

  • C#实现的简单整数四则运算计算器功能示例

    本文实例讲述了C#实现的简单整数四则运算计算器功能.分享给大家供大家参考,具体如下: 运行效果图如下: 具体代码如下: using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; using System.Drawing; using System.Text; using System.Windows.Forms; namespace 计算器 { public pa

  • JS实现的简单四则运算计算器功能示例

    本文实例讲述了JS实现的简单四则运算计算器功能.分享给大家供大家参考,具体如下: 先来看看运行效果: 具体代码如下: <!DOCTYPE html> <html> <meta name="content-type" content="text/html; charset=UTF-8"> <head> <title>www.jb51.net 计算器 Calculator</title> <!

  • PHP实现的简单在线计算器功能示例

    本文实例讲述了PHP实现的简单在线计算器功能.分享给大家供大家参考,具体如下: <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf8"> <title>简单的计算器(www.jb51.net)</title> </head> <body> <?php //如果用户单击了计算按

  • PHP基于堆栈实现的高级计算器功能示例

    本文实例讲述了PHP基于堆栈实现的高级计算器功能.分享给大家供大家参考,具体如下: 当我们得到一个字符串运算式该如何去得出它的运算结果呢? 这时候我们就能使用堆栈的算法很巧妙的解决这个问题. 思路是这样的:(我们利用php函数substr循环去截取这个字符串运算式,依次取出这个字符串的值[我们得从第一个字符开始截取],我们将开始截取位置设为一个循环增长的变量,初始化为[$index=0]),同时还需要创建两个栈,一个专门存放数字[$numStack],一个存放运算符[$operStack],我们

随机推荐