zoukankan      html  css  js  c++  java
  • vue简单的计算器

    vue实力超简单的计算器

    <div id="app">
            <input type="text" v-model="n1">

            <select v-model="obt">
                <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>
            var vm = new Vue({
                el: '#app',
                data: {
                    n1: 0, //input值默认为0
                    n2: 0,
                    result: 0,
                    obt: '+' //方法默认为+
                },
                methods: {
                    calc() { //计算器算术的方法
                        //逻辑:
                        switch (this.obt) {
                            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>

    本文来自博客园,作者:Face丶,转载请注明原文链接:https://www.cnblogs.com/fist/p/13068370.html

  • 相关阅读:
    LR十九:Analysis 图标分析
    Llinux:mysql的安装教程
    Jmeter28:linux下实现压测-html报表生成-控制台参数优化
    Llinux:自动分配ip的方法
    Llinux:环境变量的配置-java-JMETER
    if _ else if _ else,case,程序逻辑判断- java基础
    LR十八:Controller组件- 集合点的功能-loadrunner
    LR十七:Controller
    Jmeter27:TCP_协议_socket接口
    LR十六:socket_tcp协议_loadrunner测试
  • 原文地址:https://www.cnblogs.com/fist/p/13068370.html
Copyright © 2011-2022 走看看