vue计算属性和侦听器的应用

m0_66450802

已于 2023-04-03 13:28:34 修改

阅读量64

点赞数

文章标签： vue.js 前端 javascript

于 2023-04-03 13:20:20 首次发布

本文链接：https://blog.csdn.net/m0_66450802/article/details/129922325

版权

首先创建一个div，通过input函数用于输入需要计算的数字，再用placeholder属性提示请输入第一个和第二个数字，最后用V-model绑定数字。用select 元素中的option标签显示加减乘除操作符。代码如下：

<div id="app">
        <input type="text" placeholder="输入第一个数" v-model.number="num1">
        <select v-model="sign">
            <option>+</option>
            <option>-</option>
            <option>*</option>
            <option>/</option>
        </select>
        <input type="text" placeholder="输入第二个数" v-model.number="num2"> <br>
        结果是:{{parseInt(res)}} <br>

        <input type="text" placeholder="输入第一个数" v-model.number="num3">
        <select v-model="sign1">
            <option>+</option>
            <option>-</option>
            <option>*</option>
            <option>/</option>
        </select>
        <input type="text" placeholder="输入第二个数" v-model.number="num4"> <br>
        结果是:{{res1}} <br>


        <input type="text" placeholder="输入第一个数" v-model.number="num5" @change="change">
        <select v-model="sign2" @change="change">
            <option>+</option>
            <option>-</option>
            <option>*</option>
            <option>/</option>
        </select>
        <input type="text" placeholder="输入第二个数" v-model.number="num6" @change="change"> <br>
        结果是:{{res2}}
    </div>

运行效果

接下来就是计算属性，使用 methods 属性和change事件实现使用加减乘除：

通过computed属性和if-else实现计算属性

通过监听器

以下是全部代码：

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<script src="js/vue.js"></script>

<body>
    <div id="app">
        <input type="text" placeholder="输入第一个数" v-model.number="num1">
        <select v-model="sign">
            <option>+</option>
            <option>-</option>
            <option>*</option>
            <option>/</option>
        </select>
        <input type="text" placeholder="输入第二个数" v-model.number="num2"> <br>
        结果是:{{parseInt(res)}} <br>

        <input type="text" placeholder="输入第一个数" v-model.number="num3">
        <select v-model="sign1">
            <option>+</option>
            <option>-</option>
            <option>*</option>
            <option>/</option>
        </select>
        <input type="text" placeholder="输入第二个数" v-model.number="num4"> <br>
        结果是:{{res1}} <br>


        <input type="text" placeholder="输入第一个数" v-model.number="num5" @change="change">
        <select v-model="sign2" @change="change">
            <option>+</option>
            <option>-</option>
            <option>*</option>
            <option>/</option>
        </select>
        <input type="text" placeholder="输入第二个数" v-model.number="num6" @change="change"> <br>
        结果是:{{res2}}
    </div>
    <script>
        const vm = new Vue({
            el: "#app",
            data: {
                num1: 0,
                num2: 0,
                sign: "+",
                num3: 0,
                num4: 0,
                sign1: "+",
                res1: "",
                num5: 0,
                num6: 0,
                sign2: "+",
                res2: ""
            },
            //通过方法实现
            methods: {
                change() {
                    if (this.sign2 === "+") {
                        this.res2 = this.num5 + this.num6;
                    } else if (this.sign2 === "-") {
                        this.res2 = this.num5 - this.num6;
                    } else if (this.sign2 === "*") {
                        this.res2 = this.num5 * this.num6;
                    } else if (this.sign2 === "/") {
                        this.res2 = this.num5 / this.num6;
                    }
                }
            },
            //通过计算属性实现
            computed: {
                res() {
                    if (this.sign === "+") {
                        return this.num1 + this.num2;
                    } else if (this.sign === "-") {
                        return this.num1 - this.num2;
                    } else if (this.sign === "*") {
                        return this.num1 * this.num2;
                    } else if (this.sign === "/") {
                        return this.num1 / this.num2;
                    }
                }
            },
            //通过监听器
            watch: {
                num3(val) {
                    if (this.sign1 === "+") {
                        this.res1 = val + this.num4;
                    } else if (this.sign1 === "-") {
                        this.res1 = val - this.num4;
                    } else if (this.sign1 === "*") {
                        this.res1 = val * this.num4;
                    } else if (this.sign1 === "/") {
                        this.res1 = val / this.num4;
                    }
                },
                num4(val) {
                    if (this.sign1 === "+") {
                        this.res1 = this.num3 + val;
                    } else if (this.sign1 === "-") {
                        this.res1 = this.num3 - val;
                    } else if (this.sign1 === "*") {
                        this.res1 = this.num3 * val;
                    } else if (this.sign1 === "/") {
                        this.res1 = this.num3 / val;
                    }
                },
                sign1(val) {
                    if (val === "+") {
                        this.res1 = this.num3 + this.num4;
                    } else if (val === "-") {
                        this.res1 = this.num3 - this.num4;
                    } else if (val === "*") {
                        this.res1 = this.num3 * this.num4;
                    } else if (val === "/") {
                        this.res1 = this.num3 / this.num4;
                    }
                }
            }
        })
    </script>
</body>

</html>

m0_66450802

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
vue计算属性和侦听器的应用

首先创建一个div，通过input函数用于输入需要计算的数字，再用placeholder属性提示请输入第一个和第二个数字，最后用V-model绑定数字。用select 元素中的option标签显示加减乘除操作符。通过computed属性和if-else实现计算属性。接下来就是计算属性，使用。
复制链接

扫一扫