zoukankan      html  css  js  c++  java
  • Vue——实现简易计算器

    效果图

    <!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>
    </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 src="../vue/vue.js"></script>
        <script>
            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;
                        }
                    }
                }
            })
        </script>
    </body>
    
    </html>
  • 相关阅读:
    MT【347】单变量求最值
    MT【346】拐点处分界
    MT【345】三个绝对值的和
    MT【344】构造函数
    MT【343】三数平方法
    MT【342】条件为非负实数
    MT【341】换元变形
    MT【340】彭塞列闭合定理
    MT【339】待定系数
    MT【338】分式变形
  • 原文地址:https://www.cnblogs.com/yangpeixian/p/11703146.html
Copyright © 2011-2022 走看看