使用计算属性写简易计算器

最新推荐文章于 2024-07-16 09:46:43 发布

sslcsq

最新推荐文章于 2024-07-16 09:46:43 发布

阅读量480

点赞数 4

文章标签： vue.js

本文链接：https://blog.csdn.net/sslcsq/article/details/103600493

版权

简易计算器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="https://cdn.bootcss.com/vue/2.4.4/vue.min.js"></script>
</head>
<body>
    <div id="ssl">
        <input type="text" v-model="z">
        <select v-model="j">
            <option value="+">+</option>
            <option value="-">-</option>
            <option value="*">*</option>
            <option value="/">/</option>
        </select>
        <input type="text" v-model="y">
        <span> = </span>
        <input type="text" v-model="s">
    </div>
</body>
<script>
    new Vue({
        el:"#ssl",
        data:{
            z:"",
            j:"",
            y:"",
        },
        computed:{
            s()
            {
                if(this.j=="+")
                {
                    return Number(this.z)+Number(this.y);
                }
                else if(this.j=="-")
                {
                    return parseInt(this.z-this.y);
                }
                else if (this.j == "*") {
                    return parseInt(this.z * this.y);
                }
                else if (this.j == "/") {
                    return parseInt(this.z / this.y);
                }
            }
        }
        // watch:{
        //     j(val)
        //     {
        //         if(val=="+")
        //         {
        //             this.s= Number(this.z)+Number(this.y);
        //         }
        //         else if(val=="-")
        //         {
        //             this.s = parseInt(this.z - this.y);
        //         }
        //         else if (val == "*") {
        //             this.s = parseInt(this.z * this.y);
        //         }
        //         else if (val == "/") {
        //             this.s = parseInt(this.z / this.y);
        //         }
        //     }
        // }
    })
</script>
</html>

这里使用computed计算属性来实现简易计算器之前使用watch监听有点小bug注释掉了~~