当前位置： 首页 > news >正文

Vue学习笔记（九、简易计算器）

news 文章来源：https://blog.csdn.net/ttod/article/details/143177224 2024/11/6 7:55:16

         在这个案例中，我们使用v-model分别双向绑定了n1、n2操作数，op操作选项和result计算结果，同时用@绑定了等号按钮事件。

        由于是双向绑定，当input和select通过外部输入内容时，vm内部的数值也会改变，所以calculate只计算内部这些变量就可以得到正确的结果。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>VueBaseCode</title><script src="./lib/vue.js"></script>
</head><body><div id="app"><input type="text" v-model="n1"><select v-model="op"><option value="+">+</option><option value="-">-</option><option value="*">*</option><option value="/">/</option></select><input type="text" v-model="n2"><input type="button" value="=" @click="calculate"><input type="text" v-model="result"></div><script>var vm = new Vue({el: '#app',data: {n1: 0,n2: 0,op: "+",result: 0},methods: {calculate() {switch (this.op) {case "+":this.result = parseInt(this.n1) + parseInt(this.n2)break;case "-":this.result = parseInt(this.n1) - parseInt(this.n2)break;case "*":this.result = parseInt(this.n1) * parseInt(this.n2)break;case "/":this.result = parseInt(this.n1) / parseInt(this.n2)break;}}}});</script>
</body></html>

         其实这里calculate方法也可以简写一下：

calculate() {this.result = eval(this.n1 + this.op + this.n2);
}

        附：eval()函数接受一个字符串作为参数，并将这个字符串作为JavaScript代码来执行，可以用于用户动态输入执行代码或用于动态生成的代码段的执行，其执行的代码会在当前作用域中运行，这意味着它可以访问和修改当前作用域中的变量，其问题主要包含三个方面，1、又代码注入风险。2、性能差一些。3、可读性和维护性差一些。

相关文章：

Vue学习笔记（九、简易计算器）

在这个案例中&#xff0c;我们使用v-model分别双向绑定了n1、n2操作数&#xff0c;op操作选项和result计算结果&#xff0c;同时用绑定了等号按钮事件。 由于是双向绑定&#xff0c;当input和select通过外部输入内容时&#xff0c;vm内部的数值也会改变&#xff0c;所以calcula…...

编程日记 2024/10/27 1:44:27

Maven 不同环境灵活构建

需求: 使用 Maven根据不同的构建环境&#xff08;如开发、测试、生产&#xff09;来定义不同的配置&#xff0c;实现灵活的构建管理。 需要Demo项目的可以参考&#xff1a;我的demo项目 一、项目分层 一般的初创项目不会有特别多的配置文件&#xff0c;所以使用 spring.profile…...

编程日记 2024/10/27 1:43:26

第三十篇：TCP连接断开过程，从底层说明白，TCP系列五

上一篇《第二十九篇&#xff1a;图解TCP三次握手&#xff0c;看过不会忘&#xff0c;从底层说清楚&#xff0c;TCP系列四》说了TCP的三次握手&#xff0c;接下来我将讲解TCP四次挥手。 既然有连接就有断开&#xff0c;谈到这里&#xff0c;有的同学可能会想&#xff0c;不就是…...

编程日记 2024/10/27 1:42:25

代码随想录算法训练营第七天| 哈希表理论基础 454.四数相加II 383.赎金信 15.三数之和 18.四数之和

454. 四数相加 II 题目 给定四个包含整数的数组 A, B, C, D&#xff0c;计算有多少个元组 (i, j, k, l) 使得 A[i] B[j] C[k] D[l] 0。 解题思路 先计算数组 A 和 B 的所有组合和&#xff0c;并存入哈希表 map 中&#xff0c;键为组合和&#xff0c;值为该和出现的次数…...

编程日记 2024/10/27 1:41:23

搜维尔科技：Manus新品发布Metagloves Pro专业版，专为高精度需求的客户打造，尤其是人形机器人产业与人机工效研究使用

manus新品发布Metagloves Pro专业版&#xff0c;专为高精度需求的客户打造&#xff0c;尤其是人形机器人产业与人机工效研究使用 搜维尔科技&#xff1a;manus新品发布Metagloves Pro专业版&#xff0c;专为高精度需求的客户打造&#xff0c;尤其是人形机器人产业与人机工效研究…...

编程日记 2024/10/27 1:39:20

Spring Boot实现的动态化酒店住宿管理系统

1系统概述 1.1 研究背景 随着计算机技术的发展以及计算机网络的逐渐普及&#xff0c;互联网成为人们查找信息的重要场所&#xff0c;二十一世纪是信息的时代&#xff0c;所以信息的管理显得特别重要。因此&#xff0c;使用计算机来管理酒店客房管理系统的相关信息成为必然。开发…...

编程日记 2024/10/27 1:38:18

数字IC后端实现Innovus |给各种IP子模块添加port buffer和antenna diode万能脚本

我们之前分享过在hierarchical flow后端实现中为了确保顶层flatten时timing signoff和physical signoff看到的情况和模块级看到的情况一致&#xff0c;我们会在模块io port添加io port buffer&#xff08;主要是timing&#xff0c;antenna一致性&#xff09;。实际上在芯片级我…...

编程日记 2024/10/27 1:36:13

反向代理服务器---NGINX

1.NGINX NGINX&#xff08;发音为“engine-x”&#xff09;是一个开源的高性能HTTP服务器和反向代理服务器。它被广泛用于互联网应用程序的加速、负载均衡和高可用性的配置。NGINX具有低内存消耗、高并发能力和卓越的性能&#xff0c;能够处理大量并发连接和高流量的网络流量。…...

编程日记 2024/10/27 1:35:12

unity3d————场景管理类SceneManager

常用API SceneManager.LoadScene(string sceneName) 加载名为 sceneName 的场景。SceneManager.LoadScene(int sceneBuildIndex) 根据场景在Build设置中的索引加载场景。SceneManager.GetActiveScene() 获取当前活动的场景。SceneManager.GetSceneByName(string name) 根据名称…...

编程日记 2024/10/27 1:31:04

鹅厂面试官：Transformer 为何需要位置编码？

最近这一两周看到不少互联网公司都已经开始秋招发放Offer。 不同以往的是&#xff0c;当前职场环境已不再是那个双向奔赴时代了。求职者在变多&#xff0c;HC 在变少&#xff0c;岗位要求还更高了。 最近&#xff0c;我们又陆续整理了很多大厂的面试题&#xff0c;帮助一些球…...

编程日记 2024/10/27 1:26:59

MySQL数据库学习指南

一、数据库的库操作 1、创建数据库 2、删除数据库 3、查看数据库 4、选择数据库 5、修改数据库 6、数据库备份与恢复 7、数据库的权限管理 二、数据库的表操作 1、创建表 2、删除表 3、修改表 4、查看表的结构 5、查看表的数据 6、创建索引 7、删除索引 8、约束…...

编程日记 2024/10/27 1:25:57

算法刷题-小猫爬山

本题来源165. 小猫爬山 - AcWing题库 翰翰和达达饲养了 NN 只小猫&#xff0c;这天&#xff0c;小猫们要去爬山。 经历了千辛万苦&#xff0c;小猫们终于爬上了山顶&#xff0c;但是疲倦的它们再也不想徒步走下山了&#xff08;呜咕>_<&#xff09;。 翰翰和达达只好花…...

编程日记 2024/10/27 1:21:52

Maven项目管理工具-初始+环境配置

1. Maven的概念 1.1. 什么是Maven Maven是跨平台的项目管理工具。主要服务于基于Java平台的项目构建&#xff0c;依赖管理和项目信息管理。 理想的项目构建&#xff1a;高度自动化&#xff0c;跨平台&#xff0c;可重用的组件&#xff0c;标准化的流程 maven能够自动下载依…...

编程日记 2024/10/27 1:19:47

【JavaEE初阶】网络编程TCP协议实现回显服务器以及如何处理多个客户端的响应

前言 &#x1f31f;&#x1f31f;本期讲解关于TCP/UDP协议的原理理解~~~ &#x1f308;感兴趣的小伙伴看一看小编主页&#xff1a;GGBondlctrl-CSDN博客 &#x1f525; 你的点赞就是小编不断更新的最大动力 &#x1f386;那么废话不多说…...

编程日记 2024/10/27 1:18:43

Android 中的串口开发

一&#xff1a;背景 本文着重讲安卓下的串口。 由于开源的Android在各种智能设备上的使用越来越多&#xff0c;如车载系统等。在我们的认识中&#xff0c;Android OS的物理接口一般只有usb host接口和耳机接口&#xff0c;但其实安卓支持各种各样的工业接口&#xff0c;如HDM…...

编程日记 2024/10/27 1:17:36

TensorRt OP

在TensorRT中&#xff0c;OP&#xff08;Operations&#xff0c;操作&#xff09;是指网络中的基本计算单元&#xff0c;类似于数学中的运算符。每个OP执行一个特定的计算任务&#xff0c;例如卷积、矩阵乘法、激活函数等。TensorRT通过识别和优化这些OP来提高深度学习模型的推…...

编程日记 2024/10/27 1:16:33

构建负责任的人工智能：数据伦理与隐私保护

构建负责任的人工智能&#xff1a;数据伦理与隐私保护 目录 &#x1f31f; 数据伦理的重要性&#x1f4ca; 公平性评估&#xff1a;实现无偏差的模型&#x1f512; 数据去标识化&#xff1a;保护用户隐私的必要手段&#x1f50d; 透明性与问责&#xff1a;建立可信的数据处理…...

编程日记 2024/10/27 1:15:32

微信小程序live-pusher和video同时使用，video播放声音时时大时小

一、遇到的问题 微信小程序live-pusher和video同时使用，video播放声音时有时无时大时小 二、排查流程 业务是模拟面试，每道题一个推流live-pusher和一个面试题video，一次面试有多道面试题，页面就一个live-pusher和一个video，切换面试题时给live-pusher和video重新赋值u…...

编程日记 2024/10/27 1:14:31

MySQL 分库分表实战

在当今互联网时代&#xff0c;数据量的增长呈爆炸式趋势&#xff0c;传统的单库单表架构已经难以满足大规模数据存储和高并发访问的需求。MySQL 分库分表技术应运而生&#xff0c;它可以有效地提高数据库的性能、扩展性和可用性。本文将详细介绍 MySQL 分库分表的实战经验。 一…...

编程日记 2024/10/27 1:12:28

MySQL—CRUD—进阶—(二) (ಥ_ಥ)

文本目录&#xff1a; ❄️一、新增&#xff1a; ❄️二、查询&#xff1a; 1、聚合查询&#xff1a; 1&#xff09;、聚合函数&#xff1a; 2&#xff09;、GROUP BY子句&#xff1a; 3&#xff09;、HAVING 子句&#xff1a; 2、联合查询&#xff1a; 1&#xff09;、内连接…...

编程日记 2024/10/27 1:11:27

时序分解 | TTNRBO-VMD改进牛顿-拉夫逊算法优化变分模态分解

时序分解 | TTNRBO-VMD改进牛顿-拉夫逊算法优化变分模态分解 目录 时序分解 | TTNRBO-VMD改进牛顿-拉夫逊算法优化变分模态分解效果一览基本介绍程序设计参考资料 效果一览 基本介绍 (创新独家)TTNRBO-VMD改进牛顿-拉夫逊优化算优化变分模态分解TTNRBO–VMD 优化VMD分解层数K和…...

编程日记 2024/10/27 1:08:23

2024“源鲁杯“高校网络安全技能大赛-Misc-WP

Round 1 hide_png 题目给了一张图片&#xff0c;flag就在图片上&#xff0c;不过不太明显&#xff0c;写个python脚本处理一下 from PIL import Image ​ # 打开图像并转换为RGB模式 img Image.open("./attachments.png").convert("RGB") ​ # 获取图像…...

编程日记 2024/10/27 1:06:22

CSS行块标签的显示方式

块级元素 标签&#xff1a;h1-h6&#xff0c;p,div,ul,ol,li,dd,dt 特点&#xff1a; &#xff08;1&#xff09;如果块级元素不设置默认宽度&#xff0c;那么该元素的宽度等于其父元素的宽度。 &#xff08;2&#xff09;所有的块级元素独占一行显示. &#xff08;3&#xff…...

编程日记 2024/10/27 1:05:20

Go 语言中的 for range 循环教程

在 Go 语言中&#xff0c;for range 循环是一个方便的语法结构&#xff0c;用于遍历数组、切片、映射和字符串。本教程将通过示例代码来帮助理解如何在 Go 中使用 for range 循环。 package mainimport "fmt"func main() {// 遍历切片并计算和nums : []int{2, 3, 4}…...

编程日记 2024/10/27 1:04:19

青训营 X 豆包MarsCode 技术训练营--小M的比赛胜场计算

问题描述 小M参加了一场n个人的比赛&#xff0c;比赛规则是所有选手两两对决。每个人有一个能力值&#xff0c;对应着他们的序号。参赛者同时被分为黄色或蓝色两种颜色。比赛胜负的规则如下&#xff1a; 当比赛双方颜色不同时&#xff0c;能力值大的选手获胜&#xff1b; 当比…...

编程日记 2024/10/27 1:03:18

海王3纯源码

海王3是一款热门的捕鱼类游戏&#xff0c;其纯源码为开发者提供了一个完整的游戏开发基础。该源码包括客户端和服务端的完整架构&#xff0c;支持多人在线竞技模式和丰富的游戏玩法。服务端采用C语言编写&#xff0c;并使用MySQL数据库来存储玩家数据&#xff0c;确保数据处理的…...

编程日记 2024/10/27 1:02:16

【ShuQiHere】Linux 系统中的硬盘管理详解：命令与技巧

【ShuQiHere】 &#x1f4bd; 在 Linux 系统中&#xff0c;硬盘管理不仅仅是存储数据的操作&#xff0c;更涉及系统性能、数据安全和稳定性的优化。无论你是系统管理员、开发者还是 Linux 爱好者&#xff0c;掌握硬盘管理的基础操作都非常有用。本文将从硬盘健康检查、分区管理…...

编程日记 2024/10/27 0:59:13

数据结构之堆和二叉树的简介

1.树 1.1 树的概念与结构 如图所示&#xff0c;树是⼀种非线性的数据结构&#xff0c;它是由 n &#xff08;n>0&#xff09; 个有限结点组成⼀个具有层次关系的集合。把它叫做树是因为它看起来像一棵倒挂的树&#xff0c;也就是说它是根朝上&#xff0c;而叶朝下的。 …...

编程日记 2024/10/27 0:56:11

微信小程序上传图片添加水印

微信小程序使用wx.chooseMedia拍摄或从手机相册中选择图片并添加水印&#xff0c; 代码如下&#xff1a; // WXML代码&#xff1a;<canvas canvas-id"watermarkCanvas" style"width: {{canvasWidth}}px; height: {{canvasHeight}}px;"></canvas&…...

编程日记 2024/10/27 0:55:10

xshell5找不到匹配的host key算法

xshell5找不到匹配的host key算法&#xff0c;是因为电脑客户端不支持服务器的算法&#xff0c;因此需要再服务器增加算法。 下面以Ubuntu系统为例&#xff0c;修改下面的文件 sudo vim /etc/ssh/sshd_config 增加下面算法 KexAlgorithms diffie-hellman-group-exchange-…...

编程日记 2024/10/27 0:54:09

免费看各大网站的软件/网络营销专业的就业方向

经过Python测试交流群的小伙伴群策群力&#xff0c;teprunner添加了一个重要功能&#xff0c;把PyCharm中的代码&#xff0c;通过Git同步到测试平台中&#xff0c;生成测试用例。这样&#xff0c;teprunner就成了一个名副其实的pytest脚本在线管理平台。 效果展示 项目添加Git仓…...

编程日记 2024/11/6 6:34:39

公司做网站设计要注意/南京谷歌推广

上个月把VPS迁到budgetVM&#xff0c;终于不用再受digitalOcean的气了&#xff0c;入手很方便&#xff0c;重点是支持支付宝付款——paypal的界面真是不习惯&#xff0c;开通速度挺快的&#xff0c;1G的内存够我折腾一段时间了~&#xff0c;额外送了俩IP&#xff0c;过段时间再…...

编程日记 2024/11/6 3:20:32

做黄金比较专业的网站/微商引流的最快方法是什么

React Native已经封装了大部分最常见的组件&#xff0c;譬如ScrollView和TextInput&#xff0c;但不可能封装全部组件。而且&#xff0c;说不定你曾经为自己以前的App还封装过一些组件&#xff0c;React Native肯定没法包含它们。幸运的是&#xff0c;在React Naitve应用程序中…...

编程日记 2024/11/6 0:40:13

wordpress博客管理/个人可以做推广的平台有哪些

与数组的区别&#xff1a;　　 数组的长度是固定的&#xff0c;集合的长度是可变的。数组用来存放基本类型的数据&#xff0c;集合用来存放对象的引用。 1、集合类接口的常用方法 COllection接口是层次结构中的根接口&#xff0c;该接口提供了添加和删除元素、管理数据的方法。…...

编程日记 2024/11/5 22:35:21

外国人做的篆字网站/重庆seo整站优化系统

问题描述:列表页进入详情页&#xff0c;或者tab页切换&#xff0c;然后再返回列表页&#xff0c;希望能切换到之前滚动位置解决问题思路:切换到其他页面前记录位置&#xff0c;返回列表页的时候返回位置。这就需要借助vue-router的beforeRouteEnter和beforeRouteLeave这两个钩子…...

编程日记 2024/11/5 21:42:27

网站里面的数据库是怎么做的/关键词出价计算公式

转载&#xff1a;https://blog.csdn.net/zhaoxiang66/article/details/81003094 1、先下载安装包 npm&#xff1a; npm install vuedraggable -S 2、引入插件&#xff0c;在你的vue文件的script标签里面这样引入 import draggable from vuedraggable 注册组件 components…...

编程日记 2024/11/5 20:07:58