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

Vue 响应式渲染 - 条件渲染

news 来源：原创 2025/5/20 0:37:17

Vue 渐进式JavaScript 框架基于Vue2的学习笔记 - Vue响应式渲染 - 条件渲染

条件渲染

v-if

v-if-else

模版template

物流状态显示判断

设置数据

不同状态渲染

总结

条件渲染

v-if

使用Vue条件判断显示和隐藏。

示例如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="../lib/vue.js"></script>
</head>
<body><div id="box"><div v-if="isShow">显示</div><div v-if="!isShow">隐藏</div></div><script>let vm = new Vue({el:'#box',data: {isShow : true}})</script>
</body>
</html>

v-if-else

在原来的例子上使用else判断来执行原有否的情况。

示例如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="../lib/vue.js"></script>
</head>
<body><div id="box"><div v-if="isShow">显示</div><div v-else>隐藏</div></div><script>let vm = new Vue({el:'#box',data: {isShow : true}})</script>
</body>
</html>

模版template

template就是一个包装元素，不会真正创建在页面上。

示例如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="../lib/vue.js"></script>
</head>
<body><div id="box"><template v-if="isShow"><div>11111</div><div>22222</div><div>33333</div></template></div><script>let vm = new Vue({el:'#box',data: {isShow:true}})</script>
</body>
</html>

效果如下：

物流状态显示判断

设置数据

写一个静态的模拟列表数据。

示例如下：

let vm = new Vue({el:'#box',data: {isShow : true,datalist: [{title:'电脑',state:0,},{title:'笔记本',state:1,},{title:'手机',state:2,},{title:'硬盘',state:3,}]}})

不同状态渲染

对物流不同状态进行判断显示。

示例如下：

<div id="box"><ul><li v-for="item in datalist">{{item.title}}---<span v-if="item.state === 0">未付款</span><span v-else-if="item.state === 1">待发货</span><span v-else-if="item.state === 2">已发货</span><span v-else>已完成</span></li></ul>
</div>

效果如下：

总结

Vue 渐进式JavaScript 框架基于Vue2的学习笔记 - Vue响应式渲染 - 条件渲染

Vue 响应式渲染 - 条件渲染

Vue 渐进式JavaScript 框架基于Vue2的学习笔记 - Vue响应式渲染 - 条件渲染目录条件渲染 v-if v-if-else 模版template 物流状态显示判断设置数据不同状态渲染总结条件渲染 v-if 使用Vue条件判断显示和隐藏。示例如下： <!DOCTYPE html> …...

编程日记 2025/5/20 0:37:17

活动预告 |【Part1】Microsoft Azure 在线技术公开课：AI 基础知识

课程介绍参加“Azure 在线技术公开课：AI 基础知识”活动，了解 AI 核心概念。参加我们举办的本次免费培训活动，了解组织如何使用 AI 技术克服实际挑战，以及如何借助 Azure AI 服务构建智能应用程序。本次培训适用于任何对 AI 解决…...

编程日记 2025/5/16 9:36:09

OpenSIPS-Dispatcher模块详解：优化SIP流量分发的利器

在 OpenSIPS 中，dispatcher 模块用于实现负载均衡和故障转移。通过 dispatcher 模块，你可以将 SIP 请求分发到一组后端服务器（如媒体服务器、代理服务器等），并根据配置的算法和策略动态调整分发逻辑。模块功能使用样…...

编程日记 2025/5/17 17:37:48

深入理解linux中的文件（下）

目录一、语言级缓冲区和内核级缓冲区二、C语音中的FILE* fp fopen(“./file.txt”,"w"): 四、理解磁盘结构： 物理结构逻辑结构五、未被打开的文件： 六、更加深入理解inode编号怎么找到文件： 七、对路径结构进行…...

编程日记 2025/5/20 0:01:15

Deepseek系列从v3到R易背面经版

deepseek v3 base要点 MTP : Multi-Token Prediction 训练时： 1. 把前一个block中input tokens经过embedding layer和transformer block的输出，进入output head之前的内容记为h，与下一个block的input tokens经过embedding layer输出的内容都…...

编程日记 2025/5/17 4:34:32

SQLAlchemy 的内存消耗

为何要研究SQLAlchemy 的内存消耗问题？因为SQLAlchemy在应用中，绝大多数问题体现在应用人员对SQLAlchemy 的内存消耗问题不认知、不重视、不处理，最终造成整个系统的大问题，使SQLAlchemy 的性能大打折扣，最终影响了SQL…...

编程日记 2025/5/20 0:13:39

Centos Ollama + Deepseek-r1+Chatbox运行环境搭建

Centos Ollama Deepseek-r1Chatbox运行环境搭建内容介绍下载ollama在Ollama运行DeepSeek-r1模型使用chatbox连接ollama api 内容介绍你好！ 这篇文章简单讲述一下如何在linux环境搭建 Ollama Deepseek-r1。并在本地安装的Chatbox中进行远程调用下载ollama 登…...

编程日记 2025/5/20 0:31:36

vscode和pycharm的区别

VSCode（Visual Studio Code）和 PyCharm 是两款常用的 Python 开发工具，它们在功能和使用体验上有一些关键区别： 1. 核心定位 VSCode：轻量级、多语言支持的代码编辑器，依靠插件扩展 Python 开发能力。PyCh…...

编程日记 2025/5/20 0:12:04

【0403】Postgres内核检查（procArray ）给定 db 是否有其他 backend process 正在运行

文章目录 1. 给定 db 是否有其他 backend 正在运行1.1 获取 allPgXact[] 索引1.1.1 MyProc 中 databaseId 初始化实现1.2 allProcs[] 中各 databaseId 判断1. 给定 db 是否有其他 backend 正在运行 CREATE DATABASE 语句创建用户指定数据库名（database-name）时候，会通过 …...

编程日记 2025/5/19 4:18:15

MySQL 数据库的体系架构

MySQL 数据库的体系架构是其高效、灵活和可扩展性的核心基础。其设计采用分层模块化结构，主要分为以下四层： 1. 连接层（Connectors & Connection Pool） 功能：负责处理客户端连接、认证和权限管理。连接管理&a…...

编程日记 2025/5/16 12:37:11

【C++高并发服务器WebServer】-14：Select详解及实现

本文目录一、BIO模型二、非阻塞NIO忙轮询三、IO多路复用四、Select()多路复用实现明确一下IO多路复用的概念：IO多路复用能够使得程序同时监听多个文件描述符（文件描述符fd对应的是内核读写缓冲区），能够提升程序的性能。 Linux下…...

编程日记 2025/5/20 0:02:47

apisix网关ip-restriction插件使用说明

ip-restriction插件可以在网关层进行客户端请求ip拦截。当然了，一般不推荐使用该方法，专业的事专业工具做。建议有条件，还是上防火墙或者waf来做。官方文档：ip-restriction | Apache APISIX -- Cloud-Native API Gateway whit…...

编程日记 2025/5/19 23:20:49

15vue3实战-----props和emit传值

15vue3实战-----props和emit传值 1.emit的使用2.配合props实现完整父子通信 vue3中props和emit的使用有点不一样,但万变不离其宗。 1.emit的使用子组件: <script setup lang"ts"> // 定义触发的事件及其数据类型 const emit defineEmits([update, delete]…...

编程日记 2025/5/18 10:35:32

第二节 docker基础之---镜像构建及挂载

查看当前镜像： [rootdocker ~]# docker images REPOSITORY TAG IMAGE ID CREATED SIZE [rootdocker ~]#很明显docker是咱们新搭建的所以目前还没有镜像 1，搜索镜像： [rootdocker ~]# docker search centos 搜索镜像并过滤是官…...

编程日记 2025/5/18 12:57:07

Android性能优化

Android性能优化如何优化一个包含大量图片加载的Android应用，以提高性能和用户体验？ 优化一个包含大量图片加载的Android应用，可以从以下几个方面入手，以提高性能和用户体验： 选择合适的图片加载库使用成熟的图片…...

编程日记 2025/5/14 21:24:12

scikit-learn简介

scikit-learn 是一个广泛使用的 Python 库，主要用于机器学习（ML）。它提供了一些简单高效的工具，适用于数据挖掘和数据分析。scikit-learn 基于 NumPy、SciPy 和 matplotlib 等科学计算库，具有易于使用的接口和高…...

编程日记 2025/5/19 5:55:15

一、导语使用 get_command_4_run_container 查询 docker 容器的启动命令获取镜像 docker pull cucker/get_command_4_run_container 查看容器命令 docker run --rm -v /var/run/docker.sock:/var/run/docker.sock cucker/get_command_4_run_container 容器id或容器名 …...

编程日记 2025/5/16 17:40:29

ssti学习笔记（服务器端模板注入）

目录一，ssti是什么二，原理所谓模板引擎（三列，可滑动查看） 三，漏洞复现 1，如何判断其所属的模板引擎？ 2，判断清楚后开始注入 （1）Jinja2&a…...

编程日记 2025/5/18 13:39:39

Docker 部署 RabbitMQ | 自带延时队列

一、获取镜像 docker pull farerboy/rabbitmq:3.9.9 二、运行镜像 docker run -d --name rabbitmq \n --hostname rabbitmq \n -p 15672:15672/tcp \n -p 5672:5672/tcp \n -v /wwwroot/opt/docker/rabbitmq:/var/lib/rabbitmq \n farerboy/rabbitmq:3.9.9 备注：…...

编程日记 2025/5/15 0:44:10

如何使用deepseek创建钉钉收费AI助理

1、打开deepseek，简单描述下自己的问题，勾选深度思考 2、deepseek给我生成了一大段提示词模板 3、打开钉钉-应用中心-找AI助理 4、点击立即创作 5、创作默认创建的是免费上网，需要创建收费的话需要先申请，填一个表单内容和价格&…...

编程日记 2025/5/19 9:58:08

【STM32系列】利用MATLAB配合ARM-DSP库设计FIR数字滤波器（保姆级教程）

ps.源码放在最后面设计IIR数字滤波器可以看这里：利用MATLAB配合ARM-DSP库设计IIR数字滤波器（保姆级教程） 前言本篇文章将介绍如何利用MATLAB与STM32的ARM-DSP库相结合，简明易懂地实现FIR低通滤波器的设计与应用。文章重点不在…...

编程日记 2025/5/19 0:24:39

2025年日祭

本文将同步发表于洛谷（暂无法访问）、CSDN 与 Github 个人博客（暂未发布） 本蒟自2025.2.8开始半停课。以下是题目格式： [题目OJ 题号] [来源（选填）] 名称 …… 题号 - 名称题目：……...

编程日记 2025/5/15 5:12:13

torch_bmm验算及代码测试

文章目录 1. torch_bmm2. pytorch源码 1. torch_bmm torch.bmm的作用是基于batch_size的矩阵乘法,torch.bmm的作用是对应batch位置的矩阵相乘，比如， mat1的第1个位置和mat2的第1个位置进行矩阵相乘得到mat3的第1个位置mat1的第2个位置和mat2的第2个位置…...

编程日记 2025/5/11 23:00:02

ChatGPT提问技巧：行业热门应用提示词案例-文案写作

ChatGPT 作为强大的 AI 语言模型，已经成为文案写作的得力助手。但要让它写出真正符合你需求的文案，关键在于如何与它“沟通”，也就是如何设计提示词（Prompt）。以下是一些实用的提示词案例，帮助你解锁 ChatG…...

编程日记 2025/5/19 18:07:18

k8s中,一.service发布服务,二.dashboard:基于网页的k8s管理插件,三.资源服务与帐号权限

一.service资源对内发布服务Cluster IP对外发布服务NodePortIngress 二.dashboard:基于网页的k8s管理插件三.资源服务与帐号权限一.service:用户无法预知pod的ip地址以及所在的节点,多个相同的pod如何访问他们上面的服务功能:1.服务自动感知:pod迁移后访问service的ip,不受影响…...

编程日记 2025/5/17 21:07:28

Python的那些事第十六篇：Python的网络爬虫技术

基于Python的网络爬虫技术研究与应用摘要随着互联网的飞速发展，网络爬虫技术在数据采集、信息挖掘等领域发挥着重要作用。本文详细介绍了Python环境下常用的网络爬虫技术，包括Requests库、BeautifulSoup库以及Scrapy框架。通过对这些工具的使用方法、…...

编程日记 2025/5/19 11:26:11

Linux第106步_Linux内核RTC驱动实验

1、了解rtc_device结构体 1)、打开“include/linux/rtc.h” rtc_class_ops是需要用户根据所使用的RTC设备编写的,其结构体如下: struct rtc_class_ops { int (*ioctl)(struct device *, unsigned int, unsigned long);/*函数指针ioctl*/ int (*read_time)(struct device *,…...

编程日记 2025/5/16 10:50:33

《XSS跨站脚本攻击》

一、XSS简介 XSS全称（Cross Site Scripting）跨站脚本攻击，为了避免和CSS层叠样式表名称冲突，所以改为了XSS，是最常见的Web应用程序安全漏洞之一，位于OWASP top 10 2013/2017年度分别为第三名和第七名&…...

编程日记 2025/5/19 7:29:12

康谋方案 | BEV感知技术：多相机数据采集与高精度时间同步方案

随着自动驾驶技术的快速发展，车辆准确感知周围环境的能力变得至关重要。BEV（Birds-Eye-View，鸟瞰图）感知技术，以其独特的视角和强大的数据处理能力，正成为自动驾驶领域的一大研究热点。一、BEV感知技术概…...

编程日记 2025/5/19 13:11:23

堆详解及C语言实现

堆结构与最大堆详解：从原理到C语言实现 1. 堆结构概述 1.1 定义与性质堆（Heap）是一种特殊的完全二叉树数据结构，满足以下性质： 结构性：完全二叉树结构有序性：每个结点的值都≥（…...

编程日记 2025/5/18 0:15:12

基于STM32的智能鱼缸水质净化系统设计

🤞🤞大家好，这里是5132单片机毕设设计项目分享，今天给大家分享的是智能鱼缸水质净化系统。目录 1、设计要求 2、系统功能 3、演示视频和实物 4、系统设计框图 5、软件设计流程图 6、原理图 7、主程序 8、总结 1、设计要求…...

编程日记 2025/5/19 14:55:44

python：csv文件批量导入mysql

1.导入sql文件到数据库中 mysql -u username -p要先创建一个空的数据库 CREATE DATABASE your_database_name;USE your_database_name;导入sql文件 source /path/to/your/file.sql;查看某个表格的结构，为后续数据插入做准备 DESCRIBE table_name;2.插入假数据到对应…...

编程日记 2025/5/18 6:55:48

第三十二周：Informer学习笔记

目录摘要Abstract1 Informer1.1 预备知识1.2 模型框架1.3 实验分析总结摘要本周学习的主要内容是Informer模型，Informer是一种专为长序列时间序列预测（LSTF） 设计的Transformer模型。相较于传统的Transformer，Informer采用Pr…...

编程日记 2025/5/19 10:49:59

计算机视觉核心任务

1. 计算机视频重要分类计算机视觉的重要任务可以大致分为以下几类： 1. 图像分类（Image Classification） 识别图像属于哪个类别，例如猫、狗、汽车等。应用场景：物品识别、人脸识别、医疗影像分类。代表模型&#…...

编程日记 2025/5/15 11:29:34

【python】matplotlib（animation）

文章目录 1、matplotlib.animation1.1、FuncAnimation1.2、修改 matplotlib 背景 2、matplotlib imageio2.1、折线图2.2、条形图2.3、散点图 3、参考 1、matplotlib.animation 1.1、FuncAnimation matplotlib.animation.FuncAnimation 是 Matplotlib 库中用于创建动画的一个…...

编程日记 2025/5/16 20:01:42

【Linux网络编程】之守护进程

【Linux网络编程】之守护进程进程组进程组的概念组长进程会话会话的概念会话ID 控制终端控制终端的概念控制终端的作用会话、终端、bash三者的关系前台进程与后台进程概念特点查看当前终端的后台进程前台进程与后台进程的切换作业控制相关概念作业状态（一般指后…...

编程日记 2025/5/17 8:44:49

Vue.js如何根据访问路径切换页面

Vue Router 在前端工程中，路由指的是，根据不同的访问路径，展示不同组件的内容。 Vue Router是Vue.js的官方路由。 Vue Router介绍。要使用vue Router，得先安装 npm install vue-router4这里的4，指的是第4个版本在s…...

编程日记 2025/5/16 7:16:36

Vue与Konva：解锁Canvas绘图的无限可能

前言在现代Web开发中，动态、交互式的图形界面已成为提升用户体验的关键要素。Vue.js，作为一款轻量级且高效的前端框架，凭借其响应式数据绑定和组件化开发模式，赢得了众多开发者的青睐。而当Vue.js邂逅Konva.js，两者结…...

编程日记 2025/5/12 10:24:45

collabora online+nextcloud+mariadb在线文档协助

1、环境龙蜥os 8.9 docker 2、安装docker dnf -y install dnf-plugins-core dnf config-manager --add-repo https://download.docker.com/linux/centos/docker-ce.repo sed -i shttps://download.docker.comhttps://mirrors.tuna.tsinghua.edu.cn/docker-ce /etc/yum.repos.…...

编程日记 2025/5/18 11:09:45

linux基础命令1

1、linux目录结构——树型结构根目录：/ 用户主目录(家目录)：~或者 /home/edu 根目录下常见的文件夹: 2、常见的命令 1、pwd 查看当前目录 cd 切换目录 cd ~ 切换到家目录 2、ls 查看当前目录的文件信息语法:ls [选项] [参…...

编程日记 2025/5/18 7:36:49

[LVGL] 在VC_MFC中移植LVGL

前言： 0. 在MFC中开发LVGL的优点是可以用多个Window界面做辅助扩展【类似GUIguider】 1.本文基于VC2022-MFC单文档框架移植lvgl8 2. gitee上下载lvgl8.3 源码，并将其文件夹改名为lvgl lvgl: LVGL 是一个开源图形库，提供您创建具有易于使用…...

编程日记 2025/5/16 4:52:44

Spring Boot整合MQTT

MQTT是基于代理的轻量级的消息发布订阅传输协议。 1、下载安装代理进入mosquitto下载地址：Download | Eclipse Mosquitto，进行下载，以win版本为例下载完成后，在本地文件夹找到下载的代理安装文件使用管理员身份打开安装安装…...

编程日记 2025/5/18 1:13:14

elasticsearch实战三 elasticsearch与mysql数据实时同步

一介绍 elasticsearch数据不是一直不变的，需要与mysql、oracle等数据库的数据做同步。本博客里涉及到的项目地址：https://www.aliyundrive.com/s/7bRWpTYsxWV 方案一： 同步调用，即操作mysql数据后，接着操作elastic…...

编程日记 2025/5/18 9:38:36

netcore openTelemetry+prometheus+grafana

一、netcore项目二、openTelemetry 三、prometheus 四、grafana添加Dashborad aspire/src/Grafana/dashboards at main dotnet/aspire GitHub 导入：aspnetcore.json和aspnetcore-endpoint.json 效果：...

编程日记 2025/5/14 18:40:52

StochSync：可在任意空间中生成360°全景图和3D网格纹理

StochSync方法可以用于在任意空间中生成图像，尤其是360全景图和3D网格纹理。该方法利用了预训练的图像扩散模型，以实现零-shot生成，消除了对新数据收集和单独训练生成模型的需求。StochSync 结合了 Diffusion Synchronization（DS&…...

编程日记 2025/5/5 17:43:03

MybatisPlus较全常用复杂查询引例（limit、orderby、groupby、having、like...）

MyBatis-Plus 是一个 MyBatis 的增强工具，在 MyBatis 的基础上只做增强不做改变，为简化开发、提高效率而生。以下是 MyBatis-Plus 中常用复杂查询（如 LIMIT、ORDER BY、GROUP BY、HAVING、LIKE 等）的引例： 1. 环境准备…...

编程日记 2025/5/19 13:12:02

大数据项目2：基于hadoop的电影推荐和分析系统设计和实现

前言大数据项目源码资料说明： 大数据项目资料来自我多年工作中的开发积累与沉淀。我分享的每个项目都有完整代码、数据、文档、效果图、部署文档及讲解视频。可用于毕设、课设、学习、工作或者二次开发等，极大提升效率！ 1、项目目标本…...

编程日记 2025/5/19 20:10:33

win10的Unet项目导入阿里云训练

win10配置文件 annotated-types0.7.0 certifi2024.12.14 charset-normalizer3.4.1 click8.1.8 colorama0.4.6 contourpy1.1.1 cycler0.12.1 docker-pycreds0.4.0 eval_type_backport0.2.2 filelock3.16.1 fonttools4.55.3 fsspec2024.12.0 gitdb4.0.12 GitPython3.1.44 idna3.…...

编程日记 2025/5/19 2:55:42