Vue简易计算器

最新推荐文章于 2024-04-07 19:37:54 发布

script~

最新推荐文章于 2024-04-07 19:37:54 发布

阅读量125

点赞数 1

文章标签： vue.js 前端 javascript css html

本文链接：https://blog.csdn.net/weixin_48780364/article/details/127721885

版权

实现简易计算器

静态部分：

    <div id="app">
        <input type="text" v-model="value1">
        <select v-model="val" name="" id="">
            <option value="+">+</option>
            <option value="-">-</option>
            <option value="*">*</option>
            <option value="/">/</option>
        </select>
        <input type="text" v-model="value2">
        <button @click="add">=</button>
        <input type="text" v-model="value3">
    </div>

js部分：

<script>
        const vm = new Vue({
            el: '#app',
            data: {
                val: '',
                value1: '',
                value2: '',
                value3: ''
            },
            methods: {
                getVal() {
                    console.log(this.value1);
                },
                add() {
                    if(this.val == '+'){
                        console.log(this.val);
                        this.value3 = Number(this.value1) +  Number(this.value2)
                    }
                    else if(this.val == '-'){
                        console.log(this.val);
                        this.value3 = Number(this.value1) -  Number(this.value2)
                    }
                    else if(this.val == '*'){
                        
                        this.value3 = Number(this.value1) *  Number(this.value2)
                    }
                    else if(this.val == '/'){
                        this.value3 = Number(this.value1) /  Number(this.value2)
                    }
                    
                },

               
            }
        })
    </script>