开发者社区> 流楚丶格念> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

Vue实现简易计算器

简介: Vue实现简易计算器
+关注继续查看

简易计算器案例


image


1. HTML 代码结构


  <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>


2. Vue实例代码:


  // 创建 Vue 实例,得到 ViewModel
    var vm = 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;
          } 

          // 注意:这是投机取巧的方式,正式开发中,尽量少用
          // var codeStr = 'parseInt(this.n1) ' + this.opt + ' parseInt(this.n2)'
          // this.result = eval(codeStr)
        }
      }
    });


3. 全部代码


<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="./lib/vue-2.4.0.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>
    // 创建 Vue 实例,得到 ViewModel
    var vm = 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)
              breakvalue_name: value,            case '/':
              this.result = parseInt(this.n1) / parseInt(this.n2)
              break;
          } 

          // 注意:这是投机取巧的方式,正式开发中,尽量少用
          // var codeStr = 'parseInt(this.n1) ' + this.opt + ' parseInt(this.n2)'
          // this.result = eval(codeStr)
        }
      }
    });
  </script>
</body>

</html> 

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
练习11—计算器实现
练习11—计算器实现
34 0
练习11—计算器实现
练习11—计算器实现
47 0
超级计算集群结合ACK实现NLP训练
使用裸金属GPU服务器、RDMA网络、CPFS和Perseus框架搭建容器化NLP训练环境。
752 0
做个计算器--实现一机一码
做个计算器--实现一机一码
47 0
Forrester:云计算受大型企业欢迎
本文讲的是Forrester:云计算受大型企业欢迎,根据Forrester的研究报告显示,大型企业很明显对云计算更加感兴趣,尤其是与中小企业相比,这将开启传统网格计算的一场大革命。
981 0
Forrester:云计算受大型企业欢迎
本文讲的是Forrester:云计算受大型企业欢迎,根据Forrester的研究报告显示,大型企业很明显对云计算更加感兴趣,尤其是与中小企业相比,这将开启传统网格计算的一场大革命。
1521 0
AI药物发现实践与隐私安全计算
AI药物发现实践与隐私安全计算
27 0
AE计算Tin的体积
Public Sub SetSelectedRastersToSelfBaseHeight()    On Error GoTo eh        Dim pRLayer As IRasterLayer    Dim pLayer As ILayer    Dim i As Integer    ...
628 0
+关注
流楚丶格念
csdn平台优质创作者,51cto TOP博主,360图书馆科技博主,燕山大学目前大三在读,日拱一卒,功不唐捐,加油!!!
1010
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载