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

web前端框架设计第四课-条件判断与列表渲染

news 2026/2/9 12:01:16

web前端框架设计第四课-条件判断与列表渲染

一.预习笔记

1.条件判断

1-1：v-if指令：根据表达式的值来判断是否输出DOM元素

在这里插入图片描述

1-2：template中使用v-if

在这里插入图片描述

1-3：v-else
1-4：v-else-if
1-5：v-show（不支持template）

在这里插入图片描述

1-6：v-if与v-show的比较（P34）
2.列表渲染
2-1：v-for遍历指令

在这里插入图片描述
在这里插入图片描述

二.课堂笔记

三.课后回顾





–行动是治愈恐惧的良药，犹豫拖延将不断滋养恐惧

相关文章：

web前端框架设计第四课-条件判断与列表渲染

web前端框架设计第四课-条件判断与列表渲染 一.预习笔记 1.条件判断 1-1：v-if指令：根据表达式的值来判断是否输出DOM元素 1-2：template中使用v-if 1-3：v-else 1-4：v-else-if 1-5：v-show（不支…...

编程日记 2024/4/16 2:03:03

计算机网络：数据链路层 - CSMA/CD协议

计算机网络：数据链路层 - CSMA/CD协议 媒体接入控制CSMA/CD协议截断二进制指数退避算法帧长与帧间间隔信道利用率 媒体接入控制 如图所示，这是一根同轴电缆，有多台主机连接到这根同轴电缆上，他们共享这根传输媒体，形成…...

编程日记 2024/4/16 2:01:01

力扣LeetCode138. 复制带随机指针的链表 两种解法（C语言实现）

目录 题目链接 题目分析 题目定位： 解题思路 解题思路1（粗暴但是复杂度高） 解题思路2（巧妙并且复杂度低） 题目链接 138. 复制带随机指针的链表https://leetcode-cn.com/problems/copy-list-with-random-pointer/ …...

编程日记 2024/4/16 2:00:00

强大的压缩和解压缩工具 Keka for Mac

Keka for Mac是一款功能强大的压缩和解压缩工具，专为Mac用户设计。它支持多种压缩格式，包括7z、Zip、Tar、Gzip和Bzip2等，无论是发送电子邮件、备份文件还是节省磁盘空间，Keka都能轻松满足用户需求。 这款软件的操作简单直观&…...

编程日记 2024/4/16 1:57:58

论文速读：Do Generated Data Always Help Contrastive Learning?

在对比学习领域，最近很多研究利用高质量生成模型来提升对比学习 给定一个未标记的数据集，在其上训练一个生成模型来生成大量的合成样本，然后在真实数据和生成数据的组合上执行对比学习这种使用生成数据的最简单方式被称为“数据膨胀”这与数据…...

编程日记 2024/4/16 1:53:55

华为欧拉系统（openEuler-22.03）安装深信服EasyConnect软件（图文详解）

欧拉镜像下载安装 iso镜像官网下载地址 选择最小化安装，标准模式 换华为镜像源 更换华为镜像站，加速下载： sed -i "s#http://repo.openeuler.org#https://mirrors.huaweicloud.com/openeuler#g" /etc/yum.repos.d/openEuler.r…...

编程日记 2024/4/16 1:50:51

git commit --amend用法

一、git commit --amend 修改提交信息：您可以使用 git commit --amend 命令来修改最新提交的提交信息。执行该命令后，Git 将会打开文本编辑器（通常是的默认文本编辑器），以便编辑提交信息。完成编辑后保存并关闭编辑器…...

编程日记 2024/4/16 1:47:48

分布式系统：缓存与数据库一致性问题

前言 缓存设计是应用系统设计中重要的一环，是通过空间换取时间的一种策略，达到高性能访问数据的目的；但是缓存的数据并不是时刻存在内存中，当数据发生变化时，如何与数据库中的数据保持一致，以满足业务系统…...

编程日记 2024/4/16 1:43:45

JavaEE企业开发新技术5

目录 2.18 综合应用-1 2.19 综合应用-2 2.20 综合应用-3 2.21 综合应用-4 2.22 综合应用-5 Synchronized ： 2.18 综合应用-1 反射的高级应用 DAO开发中，实体类对应DAO的实现类中有很多方法的代码具有高度相似性，为了提供代码的复用性,降低…...

编程日记 2024/4/16 1:42:43

mysql dump导出导入数据

前言 mysqldump是MySQL数据库中一个非常有用的命令行工具，用于备份和还原数据库。它可以将整个数据库或者特定的表导出为一个SQL文件，以便在需要时进行恢复或迁移。 使用mysqldump可以执行以下操作： 备份数据库：可以使用mysqld…...

编程日记 2024/4/16 1:41:42

刷题记录3

# 10 字符个数统计 描述 编写一个函数，计算字符串中含有的不同字符的个数。字符在 ASCII 码范围内( 0~127 ，包括 0 和 127 )，换行表示结束符，不算在字符里。不在范围内的不作统计。多个相同的字符只计算一次 例如，对…...

编程日记 2024/4/16 1:40:41

Decorator 装饰

意图 动态的给一个对象添加一些额外的职责。就增加功能而言，Decorator模式比生成子类更加灵活 结构 其中： Component定义一个对象接口，可以给这些对象动态的添加职责。ConcreteComponent定义一个对象，可以给这个对象添加一些职…...

编程日记 2024/4/16 1:39:40

SpringMVC：搭建第一个web项目并配置视图解析器

👉需求：用spring mvc框架搭建web项目，通过配置视图解析器达到jsp页面不得直接访问，实现基本的输出“hello world”功能。👩‍💻👩‍💻👩‍💻 1 创建web项目 1…...

编程日记 2024/4/16 1:34:35

一文了解HTTPS的加密原理

HTTPS是一种安全的网络通信协议，用于在互联网上提供端到端的加密通信，确保数据在客户端（如Web浏览器）与服务器之间传输时的机密性、完整性和身份验证。HTTPS的加密原理主要基于SSL/TLS协议，以下详细阐述其工作过程&…...

编程日记 2024/4/16 1:33:34

Ubuntu系统空间整理

查看文件大小命令 查看文件以及文件夹大小 ls -hl #查看文件大小，-h 表示Human-Readable ll -h #查看文件夹的大小 #du命令查看文件或文件夹的磁盘使用空间，–max-depth 用于指定深入目录的层数。#查看当前目录已经使用总大小及当前目录下一级文件或…...

编程日记 2024/4/16 1:29:29

PHP Storm 2024.1使用

本文讲的是phpstorm 2024.1最新版本激活使用教程，本教程适用于windows操作系统。 1.先去idea官网下载phpstorm包，我这里以2023.2最新版本为例 官网地址：https://www.jetbrains.com/zh-cn/phpstorm/ 2.下载下来后安装，点下一步 …...

编程日记 2024/4/16 1:28:28

王东岳-知鱼之乐【边读边记】1

2024-04-15 21:00 终于打算开始读这本书了，作者王东岳，第一次听到这个名字，是因为传说王东岳是李善友的师父，我是先从混沌学院知道的李善友，因为李善友还是有东西的，所以我对王东岳起步也是非常尊敬的。所以…...

编程日记 2024/4/16 1:26:26

迁移docker部署的GitLab

目录 1. 背景2. 参考3. 环境4. 过程4.1 查看原docker启动命令4.2 打包挂载目录传至新宿主机并创建对应目录4.3 保存镜像并传至新宿主机下4.4 新宿主机启动GitLab容器 5 故障5.1 容器不断重启5.2 权限拒绝5.3 容器内错误日志 6 重启容器服务正常7 总结 1. 背景 最近接到一个任务…...

编程日记 2024/4/16 1:21:21

今年消费新潮流：零元购商业模式

今天给大家推荐一种极具创新的电子商务模式：零元购商业模式 这个模式支持消费者以零成本或极低成本购买商品。这种模式主要通过返现、积分、优惠券等方式来减少支付金额，使消费者实现“零成本”购物的目标。 人民网在去年发表了一篇文章。 总结了一下&a…...

编程日记 2024/4/16 1:16:17

Go导入私有仓库

使用go.mod依赖第三方库时，有以下要求： 代码仓库托管于VCS(版本控制系统)；代码仓库是公开的；仓库地址使用域名访问；仓库域名支持HTTPS访问。 对于自己或者公司内部搭建的私有git，这些条件是比较难同时满足…...

编程日记 2024/4/16 1:12:13

Qt/C++开发监控GB28181系统/取流协议/同时支持udp/tcp被动/tcp主动

一、前言说明 在2011版本的gb28181协议中，拉取视频流只要求udp方式，从2016开始要求新增支持tcp被动和tcp主动两种方式，udp理论上会丢包的，所以实际使用过程可能会出现画面花屏的情况，而tcp肯定不丢包，起码…...

编程新知 2026/2/5 4:23:49

全面解析各类VPN技术：GRE、IPsec、L2TP、SSL与MPLS VPN对比

目录 引言 VPN技术概述 GRE VPN 3.1 GRE封装结构 3.2 GRE的应用场景 GRE over IPsec 4.1 GRE over IPsec封装结构 4.2 为什么使用GRE over IPsec？ IPsec VPN 5.1 IPsec传输模式（Transport Mode） 5.2 IPsec隧道模式（Tunne…...

编程新知 2025/11/3 0:44:41

【Java学习笔记】BigInteger 和 BigDecimal 类

BigInteger 和 BigDecimal 类 二者共有的常见方法 方法功能add加subtract减multiply乘divide除 注意点：传参类型必须是类对象 一、BigInteger 1. 作用：适合保存比较大的整型数 2. 使用说明 创建BigInteger对象 传入字符串 3. 代码示例 import j…...

编程新知 2025/11/8 15:39:00

React---day11

14.4 react-redux第三方库 提供connect、thunk之类的函数 以获取一个banner数据为例子 store： 我们在使用异步的时候理应是要使用中间件的，但是configureStore 已经自动集成了 redux-thunk，注意action里面要返回函数 import { configureS…...

编程新知 2026/1/19 2:13:24

Mysql中select查询语句的执行过程

目录 1、介绍 1.1、组件介绍 1.2、Sql执行顺序 2、执行流程 2.1. 连接与认证 2.2. 查询缓存 2.3. 语法解析（Parser） 2.4、执行sql 1. 预处理（Preprocessor） 2. 查询优化器（Optimizer） 3. 执行器…...

编程新知 2026/2/7 5:16:05

处理vxe-table 表尾数据是单独一个接口，表格tableData数据更新后，需要点击两下，表尾才是正确的

修改bug思路： 分别把 tabledata 和 表尾相关数据 console.log() 发现 更新数据先后顺序不对 settimeout延迟查询表格接口 ——测试可行 升级↑：async await 等接口返回后再开始下一个接口查询 ________________________________________________________…...

编程新知 2026/1/25 6:16:49

JavaScript 数据类型详解

JavaScript 数据类型详解 JavaScript 数据类型分为 原始类型（Primitive） 和 对象类型（Object） 两大类，共 8 种（ES11）： 一、原始类型（7种） 1. undefined 定…...

编程新知 2025/12/25 4:05:41

Windows安装Miniconda

一、下载 https://www.anaconda.com/download/success 二、安装 三、配置镜像源 Anaconda/Miniconda pip 配置清华镜像源_anaconda配置清华源-CSDN博客 四、常用操作命令 Anaconda/Miniconda 基本操作命令_miniconda创建环境命令-CSDN博客...

编程新知 2026/1/31 7:39:20

【Elasticsearch】Elasticsearch 在大数据生态圈的地位 实践经验

Elasticsearch 在大数据生态圈的地位 & 实践经验 1.Elasticsearch 的优势1.1 Elasticsearch 解决的核心问题1.1.1 传统方案的短板1.1.2 Elasticsearch 的解决方案 1.2 与大数据组件的对比优势1.3 关键优势技术支撑1.4 Elasticsearch 的竞品1.4.1 全文搜索领域1.4.2 日志分析…...

编程新知 2025/11/9 21:54:26

Cilium动手实验室: 精通之旅---13.Cilium LoadBalancer IPAM and L2 Service Announcement

Cilium动手实验室: 精通之旅---13.Cilium LoadBalancer IPAM and L2 Service Announcement 1. LAB环境2. L2公告策略2.1 部署Death Star2.2 访问服务2.3 部署L2公告策略2.4 服务宣告 3. 可视化 ARP 流量3.1 部署新服务3.2 准备可视化3.3 再次请求 4. 自动IPAM4.1 IPAM Pool4.2 …...

编程新知 2026/2/5 17:29:21