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

  • 相关阅读:
    C# 控制反转
    控制反转和依赖注入
    C#中使用AOP
    jquery ajax
    python(7)- 小程序练习:循环语句for,while实现99乘法表
    007所谓性格与条件并不是成功的阻碍,懦弱才是
    006学习有可能速成吗
    005自学与有人带着哄着逼着学的不同在于自学是一种成熟的自律
    005单打独斗意味着需要更好地管理自己
    004真正的教育是自我教育,真正的学习是自学
  • 原文地址:https://www.cnblogs.com/fist/p/13068370.html
Copyright © 2011-2022 走看看