Vue---基于v-model的简易计算器

男娘i 2023-06-25 08:28 21阅读 0赞

<input type="text" v-model="n1">
    
     <select name="" id="" 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">

data () {
        return {
          msg: '猥琐发育，别浪~',
          n1: 0,
          n2: 0,
          result: 0,
          opt: '+'
        }
      }

calc: function(){
    
              switch(this.calc){
                  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);
    
          }

发表评论取消回复

表情：

评论列表（有 0 条评论，21人围观）

还没有评论，来说两句吧...

相关阅读

相关简易计算器

要求写-一个计算器，要求实现加减乘除功能，并且能够循环接收新的数据，通过用户交互实现。思路推荐: 写4个方法: 加减乘除

谁借莪１个温暖的怀抱￠/ 2024年03月27日 13:51/ 0 赞/ 91 阅读

相关通过VUE制作简易计算器

> <!DOCTYPE html> > <html lang="en"> > <head> > <meta charset="UTF-8

绝地灬酷狼/ 2023年10月11日 19:39/ 0 赞/ 65 阅读

相关 Vue---基于v-model的简易计算器

<input type="text" v-model="n1"> <select name="" id="" v-model="opt">

男娘i/ 2023年06月25日 08:28/ 0 赞/ 22 阅读

相关基于QT5实现简易计算器

基于QT5实现简易计算器一、写在前面二、成品展示三、界面布局四、按钮功能五、源码下载六、补充 -------------

我不是女神ヾ/ 2023年01月12日 13:58/ 0 赞/ 213 阅读

相关 vue 简易计算器

vue 刚入门实现简易计算器如果是刚学习vue，不懂得地方可以问我哦，互相交流能更好的帮助学习。话不多说，亮代码最重要。。。 <!DOCTYPE htm

ゞ浴缸里的玫瑰/ 2022年12月01日 15:53/ 0 赞/ 203 阅读

相关基于JAVA的简易计算器

一、任务目标学会分析“简易计算器”任务的实现思路根据思路独立完成“简易计算器”的源代码编写、编译和运行掌握正则表达式来判定数字键或者数据是否合法

秒速五厘米/ 2022年10月23日 12:39/ 0 赞/ 242 阅读

相关 Vue实现简易计算器

文章目录简易计算器案例 1. HTML 代码结构 2. Vue实例代码： 3. 全部代码简易计算器案例 ![在这

刺骨的言语ヽ痛彻心扉/ 2022年10月23日 08:16/ 0 赞/ 233 阅读

相关 vue简易计算器

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF

小灰灰/ 2022年04月18日 06:33/ 0 赞/ 340 阅读

相关基于c的简易计算器二

1 include <stdio.h> 2 include <string.h> 3 include <stdlib.h> 4 in

ゝ一世哀愁。/ 2022年01月09日 10:15/ 0 赞/ 304 阅读

相关 vue简易计算器

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport"

蔚落/ 2021年07月24日 13:23/ 0 赞/ 459 阅读