vue计算器的四种代码

 

1.使用表达式

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>hhhh</title>
        <script type="text/javascript" src="js/vue.js"></script>
    </head>
    <body>
        <div id="app">
            <input type="text" v-model.number="number1" />
            <select v-model="opt">
                <option>+</option>
                <option>-</option>
                <option>*</option>
                <option>/</option>
            </select>
            <input type="text" v-model.number="number2" />
            <br />
            结果:{{number1+number2}}--{{number1*number2}}
        </div>
    </body>
    <script type="text/javascript">
        var vm = new Vue({
            el:"#app",
            data:{
                number1:0,
                number2:0,
                
            }
        })
    </script>
</html>

2.使用computed属性

input输入框定义符号，文本框绑定js内容，最后写computed

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>hhhh</title>
    <script type="text/javascript" src="js/vue.js"></script>
</head>
<body>
    <div id="app">
        <input type="text" v-model="num1">
        <select v-model="opt">
            <option value="+">+</option>
            <option value="-">-</option>
            <option value="*">*</option>
            <option value="/">/</option>
        </select>
        <input type="text" v-model="num2">
        <span> = </span>
        <input type="text" v-model="res">
    </div>
</body>
<script>
    new Vue({
        el:"#app",
        data:{
            num1:"",
            num2:"",
            opt:"+",
        },
        computed:{
            res(){
                if(this.opt=="+")
                {
                    return Number(this.num1)+Number(this.num2);
                }
                else if(this.opt=="-")
                {
                    return parseInt(this.num1-this.num2);
                }
                else if (this.opt == "*")
                {
                    return parseInt(this.num1 * this.num2);
                }
                else if (this.opt == "/") {
                    return parseInt(this.num1 / this.num2);
                }
            }
        }
       })
</script>
</html>

3.使用methods方法

input用v-model绑定，number转换数据类型

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>hhhh</title>
        <script type="text/javascript" src="js/vue.js"></script>
    </head>
    <body>
        <div id="app">
            <input type="text" v-model="number1" />
            <select v-model="opt">
                <option value="1">+</option>
                <option value="2">-</option>
                <option value="3">*</option>
                <option value="4">/</option>
            </select>
            <input type="text" v-model="number2" />
            <input type="button"value="="@click="but" />
            <input type="text" v-model="res" />
        </div>
    </body>
    <script type="text/javascript">
        var vm = new Vue({
            el:"#app",
            data:{
                number1:"",
                number2:"",
                res:"",
                opt:"1"
            },
            methods:{
                but(){
                    switch(this.opt){
                        case "1":
                        this.res=parseInt(this.number1)+parseInt(this.number2)
                        break;
                        case "2":
                        this.res=parseInt(this.number1)-parseInt(this.number2)
                        break;
                        case "3":
                        this.res=parseInt(this.number1)*parseInt(this.number2)
                        break;
                        case "4":
                        this.res=parseInt(this.number1)/parseInt(this.number2)
                        break;
                    }
                }
            }
        });
    </script>
</html>

4.使用watch监听器

使用watch监听器监视数据和运算符变化，任意一个值变化时重新计算结果

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>hhhhh</title>
        <script type="text/javascript" src="js/vue.js"></script>
    </head>
    <body>
        <div id="app">
            <input id="input" type="text" v-model="num1" /> 
             <select v-model="opt">
                 <option value ="+">+</option>
                <option value ="-">-</option>
                <option value ="*">*</option>
                <option value ="/">/</option>
             </select>
            <input type="text" v-model="num2" />
            <input type="text" v-model="res" />
        </div>
        <script type="text/javascript">
            var vm = new Vue({
                el:'#app',
                data:{
                    num1:0,
                    num2:0,
                    res:null,
                    opt:'+'
                },
                methods:{
                    watch1(){
                        switch (this.opt) {
                            case '+':
                                this.res = Number(this.num1) + Number(this.num2);
                                break;
                            case '-':
                                this.res = Number(this.num1) - Number(this.num2);
                                break;
                            case '*':
                                this.res = Number(this.num1) * Number(this.num2);
                                break;
                            case '/':
                                this.res = Number(this.num1) / Number(this.num2);
                                break;
                        }
                    }
                },
                watch:{
                    num1:function(){
                        this.watch1()
                    },
                    num2:function(){
                        this.watch1()
                    },
                    opt:function(){
                        this.watch1()
                    }
                },
                created(){
                    this.watch1()
                }
            })
        </script>
    </body>
</html>

 

posted @ 2023-04-02 15:09  旧故里草木深1  阅读(155)  评论(0)    收藏  举报