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

  • 相关阅读:
    SSM中 web.xml配置文件
    实现网站的登陆,注册,查看商品详细信息,加入购物车,注销登陆等简单功能。
    操作步骤
    mysql 查询 练习题及答案
    水仙花数!
    Spark SQL(4)-Unresolved Plan到Analyzed Plan
    Spark SQL(3) Parser到Unresolved LogicPlan
    Spark SQL(2)-InternalRow和TreeNode
    Spark SQL(1)-简述
    logstash output到kafka记录与总结( No entry found for connection 2)
  • 原文地址:https://www.cnblogs.com/fist/p/13068370.html
Copyright © 2011-2022 走看看