526互联

使用vue四种方法写一个计算器

发布时间 2023-04-01 19:51:10作者: 嘛啊啊

第一种：使用computed计算属性

1.创建项目，引入vue

<script type="text/javascript" src="js/vue.js" ></script>

2.实例化vue

<div id="app">
    
</div><script>
　var vm = new Vue({  
        el:"#app",//通过el与div元素绑定
  })
</script>

3.写一个下拉框形式的运算符号和定义两个数值并且用v-model与data里的属性双向绑定

<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" />

4.将运算符号和两个数值放在data里，再运用computed计算属性进行计算

<script type="text/javascript">
            var vm = new Vue({
                el:"#app",
                data:{
                    number1:0,
                    number2:0,
                    opt:"*"
                },
                computed:{
                    m2(){
                        if (this.opt == "+") {
                            return    this.number1 + this.number2;
                        } else if (this.opt == "-"){
                            return    this.number1 - this.number2;
                        }else if (this.opt == "*"){
                            return    this.number1 * this.number2;
                        }else if (this.opt == "/"){
                            return    this.number1 / this.number2;
                        }
                    
                    }
                }
            })
       </script>

5.将运算结果放在div里显示出来

结果：{{number1}}{{opt}}{{number2}}={{m2}}

 第二种：使用methods方法

1.再新建一个HTML文件和第一种方法的1.2.3.步骤相同，增加了一个button，定义一个名为ji的方法用@click来监听这个事件

<head>
        <meta charset="UTF-8">
        <title></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" /><button @click="ji">计算</button>
            <br />            
        </div>
        <script type="text/javascript">
            var vm = new Vue({
                el:"#app"
</script>

 

2.用methods方法写如何计算

<script type="text/javascript">
            var vm = new Vue({
                el:"#app",
                data:{
                    number1:0,
                    number2:0,
                    jisuan:"",
                    opt:"+"
                },
                methods:{
                    ji:function(){
                        if(this.opt == "+"){
                            this.jisuan = this.number1+this.number2
                        } else if(this.opt == "-"){
                            this.jisuan = this.number1-this.number2
                        }else if(this.opt == "*"){
                            this.jisuan = this.number1*this.number2
                        }else if(this.opt == "/"){
                            this.jisuan = this.number1/this.number2
                        }
                        
                    }
                }
            })
        </script>

3.将运算结果放在div里显示出来

结果：{{number1}}{{opt}}{{number2}}={{jisuan}}

第三种：使用watch状态监听

1.再新建一个HTML文件和第一种方法的1.2.3.步骤相同

<head>
        <meta charset="utf-8" />
        <title></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" />
            <p>结果：{{val}}</p>
        </div>
    </body>
    <script type="text/javascript">
        var vm = new Vue({
            el: "#app",
            data: {
                number1: 0,
                number2: 0,
                opt: "+",
                val: "",
            }
</script>

2.使用watch写如何计算

<script type="text/javascript">
        var vm = new Vue({
            el: "#app",
            data: {
                number1: 0,
                number2: 0,
                opt: "+",
                val: "",
            },
            watch: {
                number1(shu) {
                    let value = 0;
                    switch(this.opt) {
                        case '+':
                            value = shu + this.number2;
                            break;
                        case '-':
                            value = shu - this.number2;
                            break;
                        case '*':
                            value = shu * this.number2;
                            break;
                        case '/':
                            value = shu / this.number2;
                            break;
                    }
                    this.val = shu  + this.opt + this.number2 + "=" + value;
                },
                number2(shu) {
                    let value = 0;
                    switch(this.opt) {
                        case '+':
                            value = this.number1 + shu ;
                            break;
                        case '-':
                            value = this.number1 - shu ;
                            break;
                        case '*':
                            value = this.number1 * shu ;
                            break;
                        case '/':
                            value = this.number1 / shu ;
                            break;
                    }
                    this.val = this.number1 + this.opt + shu  + "=" + value;
                },
                opt(shu ) {
                    let value = 0;
                    switch(shu ) {
                        case '+':
                            value = this.number1 + this.number2;
                            break;
                        case '-':
                            value = this.number1 - this.number2;
                            break;
                        case '*':
                            value = this.number1 * this.number2;
                            break;
                        case '/':
                            value = this.number1 / this.number2;
                            break;
                    }
                    this.val = this.number1 + this.opt + this.number2 + "=" + value;
                }
            }

        })
    </script>

第四种：用表达式的方法写

新建一个HTML，引入vue，写一个下拉框形式的运算符号和定义两个数值并且用v-model与data里的属性双向绑定，用v-if判断运算符号进行相应的计算，实例化vue

<html>

    <head>
        <meta charset="utf-8">
        <title></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" />
            <p v-if="opt=='+'">{{number1}}{{opt}}{{number2}}={{number1+number2}}</h2>
            <p v-if="opt=='-'">{{number1}}{{opt}}{{number2}}={{number1-number2}}</p>
            <p v-if="opt=='*'">{{number1}}{{opt}}{{number2}}={{number1*number2}}</p>
            <p v-if="opt=='/'">{{number1}}{{opt}}{{number2}}={{number1/number2}}</p>
    </body>
    <script type="text/javascript">
        var vm = new Vue({
            el: "#app",
            data: {
                number1: 0,
                number2: 0,
                opt: "+",
            }
        })
    </script>

</html>

 效果展示