Vue用算法，计算属性，侦听器分别做一个简易计算器

最新推荐文章于 2024-07-19 14:16:29 发布
最新推荐文章于 2024-07-19 14:16:29 发布
阅读量125 收藏
点赞数
文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/changxin00/article/details/129918482
版权

共同框架

<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="js/vue.js"></script>
    </head>
    <body>
        <div id="app">
            <input type="text"  placeholder="请输入第一个数" v-model.number="number1" />
            <select v-model="opt">
                <option >+</option>
                <option >-</option>
                <option >*</option>
                <option >/</option>
            </select>
            <input type="text"  placeholder="请输入第二个数" v-model.number="number2" />
    </body>
    <script>
        var vm = new Vue({
            el:"#app",
            data:{
                number1:0,
                number2:0,
                opt:"+",
                val:0
            }
        })
    </script>
</html>

1.算法计算器

显示效果代码

{ {number1}} { {opt}} { {number2}} = { {val}}

实时识别两输入框数字

watch:{
                    number1:function(val){
                            this.val = val + this.number1;
                        },
                    number2:function(val){
                            this.val = val + this.number2;
                        }

watch ：通过监听一个或多个数据的变化，在数据变化时触发一个回调函数

通过运算符实时确定运算算数

 watch:{
                    ...
                        ,
                    opt:function(val){
                        if(val == "+") this.val = this.number1 + this.number2
                        if(val == "-") this.val = this.number1 - this.number2
        

最低0.47元/天 解锁文章
changxin00
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
Vue中的计算属性与监听器
官方推荐
01-03 2万+
Vue中的计算属性与监听器；Vue；计算属性；侦听器；Computed；watch
使用计算属性写简易计算器
sslcsq的博客
12-18 475
简易计算器 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equi...
ArcMap中属性字段计算器（Field Calculator）的使用技巧
dengkangong8549的博客
07-18 3954
很多时候，我们在使用ArcGIS进行属性数据编辑时，需要批量修改某些字段值，这时候ArcGIS提供的属性字段计算器（Field Calculator）就是一把利器。下面我就Field Calculator实际使用的经验跟大家来分享，希望对大家的使用能够起到一定的帮助。 我遇到的问题是需要添加一个字段根据已有的字段（ID）来设置该字段的内容信息。ID是从1...
vue计算属性和侦听器
duansamve的博客
04-08 1884
一、计算属性： main.js: var app = new Vue({ el: '#app', data: { math: 80, physics: 90, english: 30 }, computed: { sum: function(){ return this.m...
vue-计算器属性.过滤器，侦听器-3day
liang1132872802的博客
06-18 454
索引(下角标)是什么 let arr = [10, 32, 99]; // 索引就是数字, 标记每个值对应的序号, 从0开始 // 索引是0, 1, 2 // 数组需要用索引来换取值, 固定格式 arr[索引] // 遍历就是挨个取出来 数组的filter方法使用 let arr = [19, 29, 27, 20, 31, 32, 35]; let newArr = arr.filter((val) => {return val >= 30}) // 数组调用.filter()方法 - 传入一
Vue基础 之 米和千米的相互转换 watch监听方法
abcsimple的博客
11-05 1018
<!DOCTYPE html> <HTML> <head> <meta charset="utf"> <title>米和千米的互换watch监听</title> </head> <body> <!-- 父组件模板 --> <div id="app"> <cpn :numbe.
Vue学习——指令
5coder的大前端进阶之路-个人博客网站：blog.5coder.cn
03-23 328
Vue学习-指令 1.v-if v-if可以完全根据表达式的值在DOM中生成或移除一个元素。true->生成元素；false->移除元素。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> &lt
Web前端开发之VUE03——vue插值表达式、MVVM设计模式、基础指令
DRLDER的博客
04-12 618
vue插值表达式： MVVM设计模式： VUE的设计模式，可以实现双向绑定，同时对view和model的变化进行同时改变。 v-bind： v-on: v-on中事件对象的传递： vue修饰符： 详细修饰符见：详细修饰符https://cn.vuejs.org/v2/guide/events.html v-model: 进行表单的value属性和我们变量互相绑定到一起。 示例代码： <template> &...
vue基础
weixin_52580155的博客
12-08 417
vue基础 文章目录vue基础简介特点简单实例vue指令MVVM设计思想事件事件处理事件修饰简单计算器案例属性绑定实现样式的出现跟消失将类名改变可以给style类绑定事件分支结构、循环结构分支：v-if v-else-if v-elsev-if和v-show循环事件修饰符键盘事件表单操作基础表格搭建表单修饰符计算属性侦听器过滤器VUE的生命周期实现学生信息效果实现学生信息效果 简介 是一套用于构建用户界面的渐进式JavaScript框架。 特点 采用组件化模式，提高代码复用率、且让代码更好维护。 声明
深入浅析Vue.js计算属性和侦听器
10-18
在Vue.js中，计算属性和侦听器是两个重要的概念，它们帮助我们处理数据的复杂逻辑和响应性。让我们深入探讨这两个特性。 **一、计算属性** 计算属性是Vue.js中用于处理和组合现有数据的便捷方式。它们提供了一个在...
Vue学习笔记之计算属性与侦听器用法
10-15
在Vue.js框架中，计算属性（Computed ...理解并合理使用计算属性和侦听器，能够帮助我们更好地构建动态、响应式的Vue应用，同时优化性能。在实际开发中，应根据需求选择合适的方法来处理数据变化，以达到最佳效果。
详解vue 计算属性与方法跟侦听器区别(面试考点)
08-27
计算属性是Vue框架中的一种特殊的属性，它可以根据其他数据计算出一个新的值。计算属性的主要特点是缓存，它只有在依赖项改变时才会重新计算。例如： ``` var vm = new Vue({ el: '#app', data: { firstName: "王...
Vue中的计算属性和侦听器有什么区别？
11-03
计算属性是一个用于实时计算和返回一个新的响应式属性的方法，而侦听器是一个用于观察一个或多个响应式数据的变化，并在数据发生变化时执行相应的操作。 计算属性的优点是可以对数据进行复杂的逻辑处理，而且在模板...
Vue中的计算属性和侦听器有什么区别？经典vue面试题
06-20
在Vue中，计算属性和侦听器是两个关键的概念，它们分别服务于不同的目的，帮助开发者更有效地管理组件的状态和响应数据变化。理解这两个概念的区别对于深入掌握Vue至关重要。 **计算属性（Computed Properties）** ...
使用Vue实现点击页面触发特效
qq_45569925的博客
07-19 598
在页面上的指定区域内进行点击，则会在页面上显示设置好的随机文本，此文本出现后会执行动画，动画效果为节点在1s之内向右上方移动并在移动的过程中完成180°翻转，最后消失。
Django+vue自动化测试平台（28）-- ADB获取设备信息
测试小老弟的博客
07-17 258
adb的全称为Android Debug Bridge，就是起到调试桥的作用。通过adb可以在Eclipse中通过DDMS来调试Android程序，说白了就是调试工具。adb的工作方式比较特殊，采用监听Socket TCP 5554等端口的方式让IDE和Qemu通讯，默认情况下adb会daemon相关的网络端口，所以当我们运行Eclipse时adb进程就会自动运行。
vue图片存放在public目录和src/assets目录下的区别
最新发布
Zing_ing的博客
07-19 391
使用随时要更换的图片，有更新动态显示的需求，像banner、轮播、广告、展示性等大型图片放在public下比较合适；而一些icon、精灵图、雪碧图更适合放在assets下。如果图片不需要被处理，比如网站的结构用图，如logo图片，则放public中，否则如内容图片或者需要被构建为base64的小图标可以放assets中。
【Vue】 style中的scoped
DX390609的博客
07-15 178
在vue文件中的style标签上，有一个特殊的属性：scoped。当一个style标签拥有scoped属性时，它的CSS样式就只能作用于当前的组件，通过该属性，可以使得组件之间的样式不互相污染。
vue计算属性和侦听器的区别
07-10
Vue计算属性和侦听器是用于处理Vue实例数据变化的两种不同的方式。 计算属性是一种基于依赖关系自动更新的属性。它可以根据已有的数据计算出一个新的值，并且在依赖的数据发生变化时自动更新。计算属性可以像普通...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值