Vue中break关键字

news2024/11/17 16:23:51
Change() {
       //每次触发该事件,都要讲data重新赋值一次
      this.data =  JSON.parse(JSON.stringify(this.data1));
      // 根据选中的等级更新数据
      switch (this.selectedlevel) {
        case '1':
          // 更新数据为一级数据
          this.data = this.data.filter(item => item.level === "1");
          break;
        case '2':
          // 更新数据为二级数据
          this.data = this.data.filter(item => item.level === "2");
          break;
        case '3':
          // 更新数据为三级数据
          this.data = this.data.filter(item => item.level === "3");
          console.log("case 3")
          break;
        case '4':
          // 更新数据为四级数据
          this.data = this.data.filter(item => item.level === "4");
          console.log("case 4")
          break;
      }
      console.log("break后")
    },

以上代码是实现下拉列表切换数据的功能,这里有一个地方需要注意,也就是每一个case都要对应一个break。下面这段代码,case "3"中没有break关键字。

Change() {
       //每次触发该事件,都要讲data重新赋值一次
      this.data =  JSON.parse(JSON.stringify(this.data1));
      // 根据选中的等级更新数据
      switch (this.selectedlevel) {
        case '1':
          // 更新数据为一级数据
          this.data = this.data.filter(item => item.level === "1");
          break;
        case '2':
          // 更新数据为二级数据
          this.data = this.data.filter(item => item.level === "2");
          break;
        case '3':
          // 更新数据为三级数据
          this.data = this.data.filter(item => item.level === "3");
          console.log("case 3")
          // break;
        case '4':
          // 更新数据为四级数据
          this.data = this.data.filter(item => item.level === "4");
          console.log("case 4")
          console.log("this.data is",this.data) 
          break;
      }
      console.log("break后")
    },

可以发现这次case 3 和 case 4均被执行了,并且由于在case 3中数据已经被筛选成case 3的数据,因此在经过case 4时,数据再经过一次过滤,data就变成空。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1359346.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

架构(1)

目录 1.如何理解架构的演进? 2.如何理解架构的服务化趋势? 3.架构中有哪些技术点? 4.谈谈架构中的缓存应用? 5.在开发中缓存具体如何实现? 1.如何理解架构的演进? 初始阶段的网站架构应用服务和数据服…

2024年1月6日 十二生肖 今日运势

小运播报:2024年1月6日,星期六,农历十一月廿五 (癸卯年乙丑月己巳日),法定节假日。 红榜生肖:牛、猴、鸡 需要注意:鼠、虎、猪 喜神方位:东北方 财神方位&#xff1a…

【2024最新版】Win11基础配置操作(磁盘分区、修改各种默认存储位置、安装软件操作)【释放C盘空间】

文章目录 一、硬盘分区0. 磁盘管理1. 压缩卷2. 新建简单卷向导 二、修改默认存储位置1. 保持新内容的地方a. 位置b. 操作 2. 快速访问六件套a. 位置b. 操作 三、安装软件0. 应用商店设置a. 设置中心b. 修改下载设置 1. 微信电脑版设置a. 下载b. 安装c. 聊天记录迁移与备份d. 存…

MySQL-DCL

DCL是数据控制语言,用来管理数据库用户,控制数据库的访问权限。 管理用户:管理哪些用户可以访问哪些数据库 1.查询用户 USE mysql; SELECT * FROM user; 注意: MySQL中用户信息和用户的权限信息都是记录在mysql数据库的user表中的…

Vue入门一(前端发展史|Vue介绍|Vue插值语法|Vue指令|style与class使用|条件渲染)

文章目录 一、前端的发展史二、Vue介绍 和 基本使用1) Vue介绍2) Vue特点3) M-V-VM思想1.MVVM介绍2.MVVM的特性3.MVVM逻辑 4) 组件化开发、单页面开发组件化开发单页面开发 5) 引入方式6) 补充解释型的语言是需要解释器的 nodejs:一门后端语言7) 快速使用 三、Vue之…

力扣1944.队列中可以看到的人数--单调栈

思路: 由题知一个人能 看到 他右边另一个人的条件是这两人之间的所有人都比他们两人 矮 ,也就是说,在自己右边第一个比自己高的人后面的人就肯定看不到了那么只需要找到右边第一个比自己高的人与自己之间的所有满足要求的人就行了&#xff0…

PyTorch|一次画一批图像

想想这样一个场景,我们训练了一个神经网络,输入一些信息,这个网络可以根据信息为我们生成相关图片。 这些图片并不是一张,而是多张,我们想把这些图片一次全部显示出来,而不是一张一张的显示(这…

CSS 缩小旋转动画

<template><div class="container" @mouseenter="startAnimation" @mouseleave="stopAnimation"><!-- 旋方块 --><div class="box" :class="{ rotate-scale-down: isAnimating }"><!-- 元素内容…

Linux 进程(十) 进程替换

用fork创建子进程后执行的是和父进程相同的程序(但有可能执行不同的代码分支),子进程往往要调用一种exec*函数以执行另一个程序。当进程调用一种exec*函数时,该进程的用户空间代码和数据完全被新程序替换,从新程序的启动例程开始执行。调用exec*并不创建新进程,所以调用exec*前…

stable diffusion 人物高级提示词(四)朝向、画面范围、远近、焦距、机位、拍摄角度

一、朝向 英文中文front view正面Profile view / from side侧面half-front view半正面Back view背面(quarter front view:1.5)四分之一正面 prompt/英文中文翻译looking at the camera看向镜头facing the camera面对镜头turned towards the camera转向镜头looking away from …

c语言题目之统计二级制数中1的个数

文章目录 题目一、方法1二、方法2三&#xff0c;方法3总结 题目 统计二进制数中1的个数 输入一行&#xff0c;输出一行 输入&#xff1a; 输入一个整数 输出&#xff1a; 输出存储在内存中二进制的1的个数 一、方法1 之前的文章中&#xff0c;小编写了有关于内存在二进制中的存…

基于YOLOv7算法的高精度实时安全背心目标检测识别系统(PyTorch+Pyside6+YOLOv7)

摘要&#xff1a;基于YOLOv7算法的高精度实时安全背心目标检测系统可用于日常生活中检测与定位安全背心&#xff0c;此系统可完成对输入图片、视频、文件夹以及摄像头方式的目标检测与识别&#xff0c;同时本系统还支持检测结果可视化与导出。本系统采用YOLOv7目标检测算法来训…

flutter 五:MaterialApp

MaterialApp const MaterialApp({super.key,this.navigatorKey, //导航键this.scaffoldMessengerKey, //scaffold管理this.home, //首页Map<String, WidgetBuilder> this.routes const <String, WidgetBuilder>{}, //路由this.initialRoute, //初始路由th…

四种“栈溢出检测方法”实现分析(2种纯软件、一种纯硬件、一种软硬件结合)

1、两种纯软件的栈溢出检测方法 参考博客&#xff1a;《freeRTOS的栈溢出检测机制》&#xff1b; 2、纯硬件&#xff1a;使用栈限制寄存器 2.1、工作逻辑分析 前提条件&#xff1a;使用满减栈硬件上提供栈限制寄存器&#xff08;用SP_limit表示&#xff09;&#xff0c;可以…

互联网广告行业发展历程

在20年的历程中&#xff0c;广告主与媒体方持续面对着一些问题&#xff0c;一些核心问题推动了行业的迭代。 互联网广告经过了20年左右的高速发展&#xff0c;已愈发成熟&#xff0c;其历程是有趣的。 对互联网广告发展的理解&#xff0c;网上的文章并不多&#xff0c;已有的…

AIGC初探:提示工程 Prompt Engineering

简介 提升工程是什么 提示工程&#xff08;Prompt Engineering&#xff09;是人工智能领域中的一个概念&#xff0c;特别是在自然语言处理&#xff08;NLP&#xff09;领域中。它是一种通过设计和优化输入提示来提高AI模型表现的方法。 对于基于转换器的大型语言模型&#x…

无监督学习(K-Means)的认识

目录 一、无监督学习 二、无监督学习和有监督学习的区别 三、K-Means 3.1数据分析 3.2k-meas算法 3.3数据正态化后k-means 3.4找最佳k&#xff08;Elbow Plot&#xff09; 四、k-means算法的优缺点 一、无监督学习 无监督学习是一种机器学习的方法&#xff0c;…

机器学习--回归算法

&#x1f333;&#x1f333;&#x1f333;小谈&#xff1a;一直想整理机器学习的相关笔记&#xff0c;但是一直在推脱&#xff0c;今天发现知识快忘却了&#xff08;虽然学的也不是那么深&#xff09;&#xff0c;但还是浅浅整理一下吧&#xff0c;便于以后重新学习。 &#x1…

Eclipse设置不依赖系统环境变量,设置lombok

设置不依赖系统环境变量&#xff0c;如图首行添加 -vm. lombok配置在最后两行

企业老旧档案怎么处理?

不管选择何种处理方式处理企业老旧档案&#xff0c;都要先制定一份详细的档案处理计划&#xff0c;明确处理的目标、方式和时间&#xff0c;并确保有足够的人力和物力资源来完成处理工作。 一般来说&#xff0c;常用的企业老旧档案有以下几种方法&#xff1a; 1. 整理归档&…