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

  • 相关阅读:
    android kl文件
    ELF文件结构描述
    jquery开头
    win7无声音显示“未插入扬声器或耳机” 怎么解决
    xhtml头文件设置
    break和continue的区别
    php目录函数
    mysql语法
    php中怎么导入自己写的类
    截取文件后缀名
  • 原文地址:https://www.cnblogs.com/fist/p/13068370.html
Copyright © 2011-2022 走看看