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

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

news 2026/3/27 6:38:24

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

STM32F103引脚功能全解析：从供电到通信接口的实战配置指南

STM32F103引脚功能全解析：从供电到通信接口的实战配置指南 在嵌入式系统开发中，STM32F103系列微控制器因其出色的性能和丰富的外设资源，成为众多开发者的首选。这款基于ARM Cortex-M3内核的MCU，不仅具备72MHz的主频，还…...

编程新知 2026/3/27 6:03:01

BootstrapBlazor滑块组件：如何实现垂直方向滑动控制

BootstrapBlazor滑块组件：如何实现垂直方向滑动控制 【免费下载链接】BootstrapBlazor 项目地址: https://gitcode.com/gh_mirrors/bo/BootstrapBlazor BootstrapBlazor滑块组件为Blazor开发者提供了强大的数值输入控件，而垂直方向滑块则是构建现…...

编程新知 2026/3/27 5:38:55

MySQL迁移到达梦数据库：DMP文件转换的3种方案对比（附性能测试数据）

MySQL到达梦数据库迁移实战：DMP文件转换方案深度评测 在国产化替代浪潮下，越来越多的企业开始将MySQL数据库迁移至达梦等国产数据库平台。作为国产数据库的领军者，达梦DM8在性能、安全性和兼容性方面表现出色，但迁移过程中数据类型…...

编程新知 2026/3/27 4:09:40

CAN总线技术：数字信号与汽车电子应用解析

CAN总线技术解析：从数字信号本质到汽车电子应用1. CAN总线概述1.1 基本定义与技术背景CAN（Controller Area Network）总线是一种专为工业控制和汽车电子设计的串行通信协议，由德国Bosch公司于1983年开发，后成为国际标准…...

编程新知 2026/3/27 3:53:34

OpenClaw隐私方案：nanobot镜像本地化部署与敏感数据处理实践

OpenClaw隐私方案：nanobot镜像本地化部署与敏感数据处理实践 1. 为什么需要本地化部署的AI助手？ 去年在处理一份涉及客户隐私的法律文件时，我遇到了一个两难选择：要么手动逐条整理数百页文档，要么使用云端AI工具但面…...

编程新知 2026/3/27 3:07:01

League-Toolkit：英雄联盟智能辅助工具全方位评测

League-Toolkit：英雄联盟智能辅助工具全方位评测 【免费下载链接】League-Toolkit 兴趣使然的、简单易用的英雄联盟工具集。支持战绩查询、自动秒选等功能。基于 LCU API。 项目地址: https://gitcode.com/gh_mirrors/le/League-Toolkit 在快节奏的英雄联盟对…...

编程新知 2026/3/26 23:41:06

利用快马平台快速构建mcporter数据转换工具原型，十分钟验证数据管道设计

最近在做一个数据迁移项目时，遇到了需要频繁转换数据格式的需求。传统方式下，光是搭建开发环境、编写基础代码就要花上大半天时间。这次尝试用InsCode(快马)平台快速构建了一个mcporter数据转换工具原型，整个过程出乎意料地顺畅。 明确核心需…...

编程新知 2026/3/26 23:24:55

Rainmeter皮肤主题用户行为分析：使用数据统计

Rainmeter皮肤主题用户行为分析：使用数据统计 【免费下载链接】rainmeter Desktop customization tool for Windows 项目地址: https://gitcode.com/gh_mirrors/ra/rainmeter Rainmeter作为一款强大的Windows桌面自定义工具，允许用户通过皮肤主题…...

编程新知 2026/3/26 22:56:48

图像处理小技巧：如何用Photoshop和Python模拟近红外摄影效果

图像处理小技巧：如何用Photoshop和Python模拟近红外摄影效果 近红外摄影以其独特的视觉效果在艺术创作和科学分析领域广受欢迎。传统的近红外摄影需要特殊滤镜和改装相机，但通过数字图像处理技术，我们完全可以在不改变硬件设备的情况下&#…...

编程新知 2026/3/26 20:59:50

用Mermaid Live Editor 5分钟搞定技术图表：从零开始的完整实战指南

用Mermaid Live Editor 5分钟搞定技术图表：从零开始的完整实战指南 【免费下载链接】mermaid-live-editor Edit, preview and share mermaid charts/diagrams. New implementation of the live editor. 项目地址: https://gitcode.com/GitHub_Trending/me/mermaid…...

编程新知 2026/3/26 20:37:47