Vue 第七讲（简易计算器的实现）

最新推荐文章于 2024-02-29 09:16:48 发布

是我来晚了！

最新推荐文章于 2024-02-29 09:16:48 发布

阅读量1.1k

点赞数 2

分类专栏：前端文章标签： vue js javascript python java

本文链接：https://blog.csdn.net/weixin_51927215/article/details/116352142

版权

前端专栏收录该内容

29 篇文章 1 订阅

订阅专栏

Vue

输入框数据与配置项变量的双向绑定
计算器视图界面的实现
计算器数据关联层面的实现（简洁模板）
计算器数据关联层面的实现（复杂模板）
进一步优化（计算属性）

输入框数据与配置项变量的双向绑定

简单来说，就是定义一个视图标签（输入框：input），然后借用属性（v-model:value）与配置项变量（c）双向绑定，达到了一种效果（c 改变的同时，输入框内的数据也会改变），于是我们定义一个视图标签（按钮：button），并将此按钮与一个点击事件绑定，此点击事件又会引起配置项函数（方法）将变量（c）改变

<!DOCTYPE html>
<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>
    <script src="vue.js"></script>
</head>
<body>
    <div id="susu" >
        <input type="text" v-model:value="c">
        <button @click="fun()">通过配置项变量改变输入框的值</button>
    </div>
    <script>
        new Vue({
            el:"#susu",
            data:{
                c:100,
            },
            methods:{
                fun:function(){
                    this.c = 1000;
                    console.log("改变成功 此时值为"+this.c)
                }
            }

        })
    </script>
</body>
</html>

在浏览器中实现，发现点击按钮后，输入框内值确实得到了变化，并且在控制台上输出了一段文字，也就是点击事件使函数（fun()）内的代码得到了实现

在这里插入图片描述

计算器视图界面的实现

简单来说，就是在一个盒子（div）内，包裹着三个输入框、一个选择框及一个按钮，选择框的可选项是（运算符号），按钮的显示数据是（等于）

<body>
    <div>
        <input type="text">
        <select>
            <option>+</option>
            <option>-</option>
            <option>*</option>
            <option>/</option>
        </select>
        <input type="text">
        <input type="button" value="等于">
        <input type="text">
    </div>
</body>

在浏览器中打开，实现计算器的想法是在前二个输入框内输入数据，在选择框里选择运算符号，按按钮得出结果，并且将结果显示在第三个输入框内

在这里插入图片描述

计算器数据关联层面的实现（简洁模板）

第一个输入框数据与配置项变量（v1）双向绑定，第二个输入框数据与配置项变量（v2）双向绑定，第三个输入框数据与配置项变量（result）双向绑定，初始化三个变量均为 0，那么输入框里面就会显示出三个 0 ，如果我们改变输入框里面的值，根据双向绑定的原则，那么配置项变量也会得到改变，所以在点击按钮并且调用点击事件方法的时候，就可以以输入框里面的数据作为模板，完成算术的加减乘除

特别注意：此处的算术运算，用到了方法（eval），保留算式原有的含义

<!DOCTYPE html>
<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>
    <script src="vue.js"></script>
</head>
<body>
    <div id="susu">
        <input type="text" v-model:value="v1">
        <select v-model:value="opt">
            <option>+</option>
            <option>-</option>
            <option>*</option>
            <option>/</option>
        </select>
        <input type="text" v-model:value="v2">
        <input type="button" value="等于" @click="calcu">
        <input type="text" v-model:value="result">
    </div>
    <script>
            new Vue({
                el:"#susu",
                data:{
                    v1:0,
                    v2:0,
                    result:0,
                    opt:"+",
                },
                methods:{
                    calcu:function(){
                    var codeStr = this.v1 + this.opt + this.v2
                    console.log(codeStr)
                    this.result = eval(codeStr)
                    }
                }
            })
        </script>
</body>
</html>

在浏览器中打开

在这里插入图片描述

计算器数据关联层面的实现（复杂模板）

特别注意：此处算术的完成，需要进行分类讨论，根据下拉框的算术符号，进行相应的代码实现

<!DOCTYPE html>
<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>
    <script src="vue.js"></script>
</head>
<body>
    <div id="susu">
        <input type="text" v-model:value="v1">
        <select v-model:value="opt">
            <option>+</option>
            <option>-</option>
            <option>*</option>
            <option>/</option>
        </select>
        <input type="text" v-model:value="v2">
        <input type="button" value="等于" @click="calcu">
        <input type="text" v-model:value="result">
    </div>
    <script>
            new Vue({
                el:"#susu",
                data:{
                    v1:0,
                    v2:0,
                    result:0,
                    opt:"+",
                },
                methods:{
                    calcu:function(){
                        switch(this.opt){
                        case "+":
                            this.result = parseInt(this.v1) + parseInt(this.v2)
                            break
                        case "-":
                            this.result = parseInt(this.v1) - parseInt(this.v2)
                            break
                        case "*":
                            this.result = parseInt(this.v1) * parseInt(this.v2)
                            break
                        case "/":
                            this.result = parseInt(this.v1) / parseInt(this.v2)
                            break
                    }
                    }
                }
            })
        </script>
</body>
</html>

进一步优化（计算属性）

不需要点击按钮（button），在前二个框里输入数据后，得到的结果会自动更新在第三个框内

实现过程是，第三个输入框双向绑定配置项计算属性（computed）变量（calcu），在 Vue 里（calcu）当作一个函数，在函数内实现算术过程，并将结果作为返回值，最终传递给第三个输入框，此处需要重点注意：calcu 在视图部分被当作一个变量，在 Vue 部分被当作一个函数

<!DOCTYPE html>
<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>
    <script src="vue.js"></script>
</head>
<body>
    <div id="susu">
        <input type="text" v-model:value="v1">
        <select v-model:value="opt">
            <option>+</option>
            <option>-</option>
            <option>*</option>
            <option>/</option>
        </select>
        <input type="text" v-model:value="v2">
        <label>结果</label>
        <input type="text" v-model:value="calcu">
    </div>
    <script>
            new Vue({
                el:"#susu",
                data:{
                    v1:0,
                    v2:0,
                    result:0,
                    opt:"+",
                },
                // 配置项 计算属性
                computed:{
                    calcu:function(){
                        var codeStr = this.v1 + this.opt + this.v2
                        this.result = eval(codeStr)
                        return this.result
                    }
                }
            })
        </script>
</body>
</html>