利用方法，侦听器，计算属性实现简易计算器案例

最新推荐文章于 2024-08-14 10:08:54 发布
最新推荐文章于 2024-08-14 10:08:54 发布
阅读量88 收藏
点赞数 1
文章标签： javascript vue.js 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/HEDZY/article/details/129927630
版权
本文展示了在Vue.js中计算两个数的加减乘除操作的三种实现方法：1)直接在methods中定义计算方法，通过按钮点击触发；2)使用侦听器watch监听数据变化并自动计算；3)利用计算属性computed动态计算结果，无需额外的触发操作。每种方法都强调了数据的双向绑定和响应式更新。
摘要由CSDN通过智能技术生成

1.利用方法实现

效果图

在这里插入图片描述

<!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="root">
        <h2>普通方法</h2>
        <input type="number" placeholder="请输入第一个数" v-model.number="number1"> <!--利用双向绑定第一个数-->
        <select v-model="opt"> <!--多选标签，给符号定一个双向绑定-->
            <option>+</option>
            <option>-</option>
            <option>*</option>
            <option>/</option>
        </select>
        <input type="number" placeholder="请输入第二个数" v-model.number="number2"> <!--利用双向绑定第二个数-->
        <button @click="jisuan()">计算</button> <!--绑定一个点击事件，计算两个数的结果-->
        <br>
        <div class="result">
            结果为：{{result}} <!--用一个result接收两个数的计算结果-->
        </div>

    </div>
    <script>
        const vm = new Vue({
            el: '#root', //指定id为root的容器
            data: { //存放所用的数据，第一个数，运算符号，第二个数，计算结果
                number1: '',
                opt: '+',
                number2: '',
                result: ''

            },
            methods: {
                jisuan() { 
                    //这里是点击事件所用方法，利用switch判断语句，小括号内写表达式，把表达式的值与每个 case 的值进行对比，如果存在匹配，则执行关联代码
                    switch (this.opt) {
                        case '+':
                            this.result = this.number1 + this.number2; //此处返回两个数的和
                            break;
                        case '-':
                            this.result = this.number1 - this.number2; //此处返回两个数的差
                            break;
                        case '*':
                            this.result = this.number1 * this.number2; //此处返回两个数的乘积
                            break;
                        case '/':
                            this.result = this.number1 / this.number2; //此处返回两个数的商
                            break;
                    }
                }
            }

        })
    </script>
</body>

</html>

普通方法直接在methods里定义一个名为jisuan()的计算方法，在页面中直接调用该方法即可。

2.侦听器实现

效果图

在这里插入图片描述

<!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="root">
        <h2>使用侦听器</h2>
        <input type="number" placeholder="请输入第一个数" v-model.number="number1"> <!--利用双向绑定第一个数-->
        <select v-model="opt"> <!--多选标签，给符号定一个双向绑定-->
            <option>+</option>
            <option>-</option>
            <option>*</option>
            <option>/</option>
        </select>
        <input type="number" placeholder="请输入第二个数" v-model.number="number2">
        <!--利用双向绑定第二个数-->
        <br>
        <div class="result">
            结果为：{{result}}<!--用一个result接收两个数的计算结果-->
        </div>

    </div>
    <script>
        const vm = new Vue({
            el: '#root', //指定id为root的容器
            data: { //存放所用的数据，第一个数，运算符号，第二个数，计算结果
                number1: '',
                opt: '+',
                number2: '',
                result: '',

            },
            watch: {
                number1(newValue) {
                    //此处监听第1个数，因此在返回值的时候要把原有的旧值替换为小括号内的新值newValue
                    switch (this.opt) {
                        //这里是点击事件所用方法，利用switch判断语句，小括号内写表达式，把表达式的值与每个 case 的值进行对比，如果存在匹配，则执行关联代码
                        case '+':
                            this.result = newValue + this.number2;
                            break;
                        case '-':
                            this.result = newValue - this.number2;
                            break;
                        case '*':
                            this.result = newValue * this.number2;
                            break;
                        case '/':
                            this.result = newValue / this.number2;
                            break;
                    }
                },
                number2(newValue) {
                    //此处监听第2个数，因此在返回值的时候要把原有的旧值替换为小括号内的新值newValue
                    switch (this.opt) {
                        case '+':
                            this.result = this.number1 + newValue;
                            break;
                        case '-':
                            this.result = this.number1 - newValue;
                            break;
                        case '*':
                            this.result = this.number1 * newValue;
                            break;
                        case '/':
                            this.result = this.number1 / newValue;
                            break;
                    }
                },
                opt(newValue) {
                    //此处监听运算符号，这里只需要switch语句中小括号内的旧值改为newValue即可
                    switch (newValue) {
                        case '+':
                            this.result = this.number1 + this.number2;
                            break;
                        case '-':
                            this.result = this.number1 - this.number2;
                            break;
                        case '*':
                            this.result = this.number1 * this.number2;
                            break;
                        case '/':
                            this.result = this.number1 / this.number2;
                            break;
                    }
                }
            }

        })
    </script>
</body>

</html>

利用侦听器主要就是监视data数据中属性的变化，当数据发生变化时，会调用侦听器中的对应的方法，侦听器函数，会接收两个参数，第一个参数为newVal(被改变的数据)，第二个参数为oldVal(赋值新值之前的值)。如在上述代码中，将侦听器watch更改一下，在我们代码里不需要接受第二个参数，即旧的值，只需接受第一个新的值即可

3.计算属性实现

效果图

在这里插入图片描述

<!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="root">
        <h2>使用计算属性</h2>
        <input type="number" placeholder="请输入第一个数" v-model.number="number1"> <!--利用双向绑定第一个数-->
        <select v-model="opt"> <!--多选标签，给符号定一个双向绑定-->
            <option>+</option>
            <option>-</option>
            <option>*</option>
            <option>/</option>
        </select>
        <input type="number" placeholder="请输入第二个数" v-model.number="number2"> <!--利用双向绑定第二个数-->
        
        <br>
        <div class="result">
            第一个数：{{number1}}<br>
            第二个数：{{number2}}<br>
            结果：{{result}} <!--用一个result接收两个数的计算结果-->
        </div>

    </div>
    <script>
        const vm = new Vue({
            el: '#root', //指定id为root的容器
            data: { //存放所用的数据，第一个数，运算符号，第二个数，计算结果
                number1: '',
                opt: '+',
                number2: '',

            },
            computed:{
                //此处运用计算属性
                result(){
                    //在计算属性的方法当中可用return直接返回结果，不用再使用this.xxx去接收结果
                    switch (this.opt) {
                        //计算属性内必须要有返回值，这里可直接返回两个数的计算结果
                        case '+':
                            return this.number1 + this.number2; 
                            break;
                        case '-':
                            return this.number1 - this.number2;
                            break;
                        case '*':
                            return this.number1 * this.number2;
                            break;
                        case '/':
                            return this.number1 / this.number2;
                            break;
                    }
                }
            }

        })
    </script>
</body>

</html>

methods和computed的区别：methods不会进行缓存，如果多次使用会调用多次。计算属性会进行缓存，如果多次使用，计算属性只会调用一次。使用计算属性时，必须有一个返回值

HEDZY
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
计算属性、方法和侦听器
学会改变的博客
07-02 195
计算属性 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>计算属性、方法和侦听器</title> <script src="./vue.js"></script> </head> <body> <div id="root"> {{ful
写个简单的计算器（分别运用方法，计算属性和监听属性）
2302_77163504的博客
04-03 49
这是div中的所有代码，利用‘input’写两个输入框，'placeholder'时当输入框中没有数字时会进行提升（请输入第*数），在利用‘select’元素中的‘option’显示加减乘除符号，同时用v-model对Vue中定义的属性进行关联。这是利用侦听器对输入框的符号切换的侦听，然后用变化后的数值进行数学计算。这时定义计算属性，实现页面中加减乘除符号的切换。这是利用方法，实现对数值的运算的代码。这是在Vue中定义的属性，以下是本次的全部代码。
如何使用 JavaScript 构建计算器应用程序
allway2的博客
11-01 1109
这个史诗般的教程通过描述如何使用该语言开发一个简单的计算器应用程序，为 JavaScript 新手提供了一个可靠的练习。 面向初学者的 javascript 项目（8 部分系列） 1构建你的第一个 JavaScript 应用程序——一个随机报价生成器 2如何使用 JavaScript 构建维基百科搜索应用程序 3如何使用 JavaScript 构建计算器应用程序 4如何使用 JavaScript 构建待办事项列表应用程序 5如何使用 JavaScript 构建自定义 HTML5 视频播...
《Vue入门到精通》最强Vue教程，附带经典案例，万字详解，干货十足！
热门推荐
abraham_ly的博客
03-21 1万+
目录：一、前言二、Vue是什么？1、简介2、发展史3、为什么要学习Vue？4、jQuery、javascript、Vue的区别5、Vue框架构造三、Vue的使用1、Vue环境搭建2、插值表达式3、指令（Directives）1、什么是指令2、指令API1、v-cloak 解决插值闪动2、v-text 填充纯文本3、v-html ：填充HTML片段4、v-pre 填充原始信息5、v-once 只编译一次6、v-model 双向数据绑定7、v-on 事件绑定8、v-bind 属性绑定9、v-if 分支结构v-i
详解vue 计算属性与方法跟侦听器区别(面试考点)
08-27
Vue计算属性与方法跟侦听器区别详解 Vue框架中，计算属性、方法和侦听器是三个常见的概念，但它们都有其特点和适用场景，下面我们将详细介绍它们的区别和使用场景。 一、计算属性（Computed Properties） 计算...
深入浅析Vue.js计算属性和侦听器
10-18
在Vue.js中，计算属性和侦听器是两个重要的概念，它们帮助我们处理数据的复杂逻辑和响应性。让我们深入探讨这两个特性。 **一、计算属性** 计算属性是Vue.js中用于处理和组合现有数据的便捷方式。它们提供了一个在...
Vue学习笔记之计算属性与侦听器用法
10-15
在Vue.js框架中，计算属性（Computed Properties）和侦听器（Watchers）是两个关键特性，用于实现数据的动态响应和复杂逻辑处理。这两者都是Vue数据绑定系统的重要组成部分，有助于提高应用性能和代码可维护性。 1....
vue侦听器watch精彩案例分享
08-07
本资源方位地分享了watch 的经典案例。其中，对 watch 监视普通数据类型、对象类型以及数组类型...此外，还对比了计算属性与 watch 之间存在的差异，并同样借助案例加以剖析。最后，对 $watch 案例进行了全面的编写。
Vue 2.0 侦听器 watch属性代码详解
10-16
Vue 2.0作为其中一个主要版本，提供了多种响应式数据处理方式，其中之一就是侦听器（watcher）功能。侦听器允许开发者在数据变化时执行相应的操作，这是一种非常有用的特性，尤其在进行异步数据处理、复杂的动态更新...
vue2前端阿里云oss服务端签名直传
weixin_74285634的博客
08-13 260
generatePresignedUrlApi是由后端提供的接口 来获取密钥。
【vue教程】五. Vue 的路由管理
前端探索者
08-13 1095
Vue Router 是 Vue 官方的路由管理器，用于构建单页面应用。它允许你通过 URL 来映射不同的组件，实现页面的动态加载和导航。路由守卫用于在路由跳转前后执行代码，可以用来检查用户认证状态、获取数据等。通过本篇文章，我们学习了 Vue Router 的基本概念、配置和使用，以及如何实现动态路由和嵌套路由。我们还探讨了路由守卫的概念，并提供了如何在 Vue 组件中使用它们的示例。这些知识点将帮助你构建一个功能完备的单页面应用。
【无标题】
最新发布
weixin_42348009的博客
08-14 165
静态方法返回一个由给定对象自身的可枚举的字符串键属性名组成的数组。
【Markdown】Markdown 中的语言简称
EleganceJiaBao的博客
08-12 989
以下是常见编程语言、脚本语言、标记语言等在 Markdown 中的语言简称以及相应的示例：
playwright链接本地浏览器，实现自动登录。
qq_38880880的博客
08-12 182
【代码】playwright链接本地浏览器，实现自动登录。
Vue中的路由与多种守卫常见问题及解决方案
zhaochen1127的博客
08-12 1130
Vue Router中的路由守卫主要分为三种类型：全局守卫、路由独享守卫和组件内守卫。全局守卫：作用于整个应用，包括beforeEach和afterEach。路由独享守卫：在路由配置中直接定义，只有进入该路由时才会触发，如。组件内守卫：定义在组件内部，包括和。路由守卫是Vue Router中一个强大的功能，能够帮助开发者在路由跳转前后执行重要的逻辑判断。然而，不当的使用和配置可能会引发一系列问题，如无限循环、守卫逻辑错误、守卫未正确触发以及异步处理不当等。
Vue 中 app.config 相关配置项介绍与案例
前端基地
08-13 1044
本博文展开了细致且全面的阐述，对 app.config 、app.config.errorHandler 、app.config.warnHandler 、app.config.performance 、app.config.compilerOptions 、app.config.globalProperties 以及 app.config.optionMergeStrategies 进行了深入剖析。不仅清晰明了地介绍了它们的功能和特性，还通过丰富多样的实际案例展开了详尽的分析。
高级java每日一道面试题-2024年8月12日-网络篇-说一下JSONP的实现原理?
qq_43071699的博客
08-12 617
JSONP是一种非官方的跨域数据交换协议，它允许在网页中通过标签的src属性从其他域名（网站）安全地获取数据。由于浏览器的同源策略限制，直接通过Ajax等方式跨域请求数据通常是不被允许的，而JSONP则巧妙地绕过了这一限制。
基于vue框架的NBA球星管理系统1878g（程序+源码+数据库+调试部署+开发环境）系统界面在最后面。
h2345678的博客
08-12 1019
随着互联网的普及和体育产业的蓬勃发展，篮球运动在全球范围内拥有庞大的粉丝群体，NBA（美国职业篮球联赛）作为其中的佼佼者，其球星更是备受关注。传统的球星信息管理方式往往依赖于纸质文档或简单的电子表格，这种方式不仅效率低下，难以实现数据的即时更新与共享，也无法满足球迷和媒体对球星信息深度挖掘的需求。因此，开发一套基于Vue框架的NBA球星管理系统，通过信息化手段整合球星信息，实现数据的快速录入、存储、查询与分析，对于提升管理效率、满足用户需求具有重要意义。，处理前端请求并提供业务逻辑。
计算属性和侦听器区别
09-09
计算属性和侦听器是Vue.js中用于监测数据变化并响应的两种方式，它们在实现的方式和用途上有所不同。 计算属性是一种在模板中声明的属性，它的值是根据其他数据计算得出的，可以将一些复杂的逻辑计算放在计算属性中，以便在模板中直接使用。计算属性会根据它所依赖的数据进行缓存，只有当依赖的数据发生变化时，才会重新计算。这样可以提高性能，避免不必要的计算。计算属性适合用于需要进行复杂计算或者有依赖关系的场景。 侦听器是一种在Vue实例中声明的方法，用于观察和响应数据的变化。当被侦听的数据发生改变时，侦听器会自动执行相应的操作。侦听器可以用来监听一个或多个数据的变化，并在数据变化时执行一些异步或复杂的操作，比如发送请求、更新UI等。侦听器适合用于需要对数据变化做出特定响应的场景。 总结来说，计算属性适用于需要根据其他数据计算得出结果的场景，能够提高代码的可读性和性能；而侦听器适用于需要对数据变化做出特定响应的场景，能够处理一些异步或复杂的操作。两者在使用上有所不同，根据具体的需求选择合适的方式。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值