vue.js小练习之计算器

最新推荐文章于 2023-04-02 18:32:49 发布

xyhanzhuangzhuang

最新推荐文章于 2023-04-02 18:32:49 发布

阅读量146

点赞数

分类专栏：小白的vue学习笔记文章标签： vue

本文链接：https://blog.csdn.net/xyhanzhuangzhuang/article/details/105248402

版权

小白的vue学习笔记专栏收录该内容

4 篇文章 0 订阅

订阅专栏

方法1：
点击button，调用对应method：submit（）,获取计算结果

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>vue.js小练习之计算器</title>
    <script src="https://unpkg.com/vue@1.0.28/dist/vue.js"></script>
</head>

<body>
    <div id='app'>
        <input type='text' :value="num1" v-model='num1' />
        <select v-model='opt' :value='opt'>
            <option value='+'>+</option>
            <option value='-'>-</option>
            <option value='*'>*</option>
            <option value='/'>/</option>
            <option value='%'>%</option>
        </select>
        <input type='text' :value="num2" v-model='num2' />
        <button @click='submit'>=</button>
        <input type="text" :value="result" />
        <div>
           计算结果： {{num1}}{{opt}}{{num2}}={{result}}
        </div>
    </div>

    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                num1: '0',
                num2: '0',
                 result: '0',
                opt: '+'
            },
            methods: {
                submit: function () {
                    var num1 = parseInt(this.num1);
                    var num2 = parseInt(this.num2);
                    switch (this.opt) {
                        case ('+'):
                            this.result = num1 + num2;
                            break;
                        case ('-'):
                            this.result = num1 - num2;
                            break;
                        case ('*'):
                            this.result = num1 * num2;
                            break;
                        case ('/'):
                        if (num2==0) {
                            alert("除数不能为0，请重新输入");
                           return;
                        }
                            this.result = num1 / num2;
                            break;
                        case ('%'):
                            this.result = num1 % num2;
                            break;
                    }
                }
            }
        });
    </script>
</body>

</html>

方法2：
利用computed 直接计算出result值，无需手动提交，页面自动响应

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>vue.js小练习之计算器</title>
    <script src="https://unpkg.com/vue@1.0.28/dist/vue.js"></script>
</head>

<body>
    <div id='app'>
        <input type='text' :value="num1" v-model='num1' />
        <select v-model='opt' :value='opt'>
            <option value='+'>+</option>
            <option value='-'>-</option>
            <option value='*'>*</option>
            <option value='/'>/</option>
            <option value='%'>%</option>
        </select>
        <input type='text' :value="num2" v-model='num2' />
       <button>=</button> 
        <input type="text" :value="result"  />
        <div>
           计算结果： {{num1}}{{opt}}{{num2}}={{result}}
        </div>
    </div>

    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                num1: '0',
                num2: '0',
                opt: '+'
            }，
            computed:{
                result:function(){
                     var num1 = parseInt(this.num1);
                    var num2 = parseInt(this.num2);
                    switch (this.opt) {
                        case ('+'):
                            return num1 + num2;
                            break;
                        case ('-'):
                            return num1 - num2;
                            break;
                        case ('*'):
                            return num1 * num2;
                            break;
                        case ('/'):
                        if (num2==0) {
                            alert("除数不能为0，请重新输入");
                           return;
                        }
                            return num1 / num2;
                            break;
                        case ('%'):
                            return num1 % num2;
                            break;
                    }
                }
            }
        });
    </script>
</body>

</html>