Vue的学习之旅-part4

Vue的学习之旅-part1

  • vue的自带指令
    • v-if v-else-if v-else
    • 虚拟DOM的复用
    • v-show 与 v-if 的不同之处:
      • v-if v-show各自合适的使用位置:
    • v-for 循环
      • v-for 循环遍历
    • :key="item" 绑定key,区分循环的内容
      • 循环的应用:

前几篇博客: Vue的学习之旅-part1
前几篇博客: Vue的学习之旅-part2
前几篇博客: Vue的学习之旅-part3

博主 DTcode7 带您 溺亖在知识的海洋里,嘿嘿嘿.~
🐒 个人主页—— DTcode7 的博客 🐒
《微信小程序相关博客》
《Vue相关博客》
《前端开发习惯与小技巧相关博客》
《AIGC相关博客》
《photoshop相关博客》
😚 吾辈才疏学浅,摹写之作,恐有瑕疵。望诸君海涵赐教。望轻喷,嘤嘤嘤 🙈
🕍 愿斯文对汝有所裨益,纵其简陋未及渊博,亦足以略尽绵薄之力。倘若尚存阙漏,敬请不吝斧正,俾便精进!

书接上回,接着说vue中自带的指令,part2中讲到v-on的冒泡阻止,那这里接着讲讲v-if v-else-if吧~

vue的自带指令

v-if v-else-if v-else

在这里插入图片描述
在这里插入图片描述
lable通过for指向表单元素的id,有聚焦功能
在这里插入图片描述
在这里插入图片描述

虚拟DOM的复用

v-if v-else 案例中的小问题:
在这里插入图片描述
在这里插入图片描述
之所以通过v-if切换显示后,input输入框中的数据仍然存在,是因为vue的渲染不是直接讲DOM渲染到页面上的,而是先在虚拟DOM中渲染,然后再添加到页面中去。
在虚拟DOM中,会复用一些东西,像这里,虚拟DOM中不会建立两个lable和input,而是之间里一套,然后渲染的时候,虚拟DOM会将出现不同的位置换掉,所以才会出现切换后,input输入框中数据还在的问题,因为vue在虚拟DOM中会复用,有些东西不会删掉(用户输入的东西没有删除,而是直接复用了)
在这里插入图片描述

不想出现这种复用的情况,就通过key属性来区分即可

在这里插入图片描述

v-show 与 v-if 的不同之处:

在这里插入图片描述
v-if是添加/移除dom元素
v-show只是改变dom的样式,仅仅让元素隐藏起来,仍然在页面中。

v-if v-show各自合适的使用位置:

当一个元素的显示与隐藏切换的非常频繁,使用 v-show,因为没有删除dom,不用反复重构,减小游览器负担
当切换显示隐藏的次数很少,或者要移除dom时,使用 v-if 我们项目中用的多的是v-if

v-for 循环

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

v-for 循环遍历

遍历数组:在这里插入图片描述
遍历对象:
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

:key=“item” 绑定key,区分循环的内容

使用 v-for的时候,要带上一个 :key=“item” ,用于提升更新虚拟DOM的效率
在这里插入图片描述
:key一定要和循环中的每个数据一一对应,不要用index(角标),(举个例子:当你插入数据的时候,index就发生改变了,原本的index和原本那个数据就不是一一对应的了,所以:key要用数据item进行和对应数据的绑定。这样才会一一对应【或者用其他能保证唯一性的数据进行绑定】) 要用数据item进行key的绑定,那么就要保证data中的item不重复,否则如果data有重复,那么key会报【重复错误】

循环的应用:

在这里插入图片描述
lable通过for指定id,注意要用v-bind(:) 进行动态绑定,否则就是字符串了

老规矩,继续下一篇~
Vue的学习之旅-part5

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

目标检测——色素性皮肤病数据集

一、重要性及意义 首先,色素性皮肤病变是一类常见的皮肤疾病,其发病率有逐年增高的趋势。这些病变可能由遗传或环境因素导致黑素细胞生成异常,如黑色素瘤等。黑色素瘤具有极高的恶性率和致死率,而且恶化可能性大,容易…

汇编——SSE打包整数

SSE也可以进行整数向量的加法,示例如下: ;sse_integer.asm extern printfsection .datadummy db 13 align 16pdivector1 dd 1dd 2dd 3dd 4pdivector2 dd 5dd 6dd 7dd 8fmt1 db "Packed Integer Vector 1: %d, %d, %d, %d",…

鸿蒙ArkTS开始实例:【canvas实现签名板功能】

使用ArkTS中的canvas实现签名板的功能,canvas画布大家都很熟悉,我们会用它经常实现一些画板或者图表、表格之类的功能。canvas签名板是我在开发APP过程中实现的一个功能,开发过程中也是遇到比较多的问题。我会按照以下几点来讲解开发整个过程…

面试算法-153-旋转图像

题目 给定一个 n n 的二维矩阵 matrix 表示一个图像。请你将图像顺时针旋转 90 度。 你必须在 原地 旋转图像,这意味着你需要直接修改输入的二维矩阵。请不要 使用另一个矩阵来旋转图像。 示例 1: 输入:matrix [[1,2,3],[4,5,6],[7,8,…

计算机网络实验——学习记录四(TCP协议)

1. 打开TCP服务: nc -e /bin/sh -lv 4499 注释: (1)nc是Linux下启动通讯服务的命令; (2)-e表示在nc命令后再执行bin文件夹下的shell命令,启动shell命令会导致所有从TCP连接传递到…

JavaEE初阶——多线程(一)

T04BF 👋专栏: 算法|JAVA|MySQL|C语言 🫵 小比特 大梦想 此篇文章与大家分享多线程的第一部分:引入线程以及创建多线程的几种方式 此文章是建立在前一篇文章进程的基础上的 如果有不足的或者错误的请您指出! 1.认识线程 我们知道现代的cpu大多都是多核心…

【蓝桥杯嵌入式】第十三届省赛(第二场)

目录 0 前言 1 展示 1.1 源码 1.2 演示视频 1.3 题目展示 2 CubeMX配置(第十三届省赛第二场真题) 2.1 设置下载线 2.2 HSE时钟设置 2.3 时钟树配置 2.4 生成代码设置 2.5 USART1 2.5.1 基本配置 2.5.2 NVIC 2.5.3 DMA 2.6 TIM 2.6.1 TIM2 2.6.2 TIM4 2.6.3 …

ICP配准算法

配准算法 问题定义ICP(point to point)算法思想步骤分解point to point和point to plane的区别ICP配准算法的标准流程NDT 本篇将介绍配准算法,将介绍ICP(point to point)、ICP(point to plane)和NDT算法。其中ICP有两种,point to point表示通过构建点与点…

达梦备份与恢复

达梦备份与恢复 基础环境 操作系统:Red Hat Enterprise Linux Server release 7.9 (Maipo) 数据库版本:DM Database Server 64 V8 架构:单实例1 设置bak_path路径 --创建备份文件存放目录 su - dmdba mkdir -p /dm8/backup--修改dm.ini 文件…

NzN的数据结构--二叉树part1

你叉叉,让你学数据结构你不学;你叉叉,让你看二叉树你不看。 今天我们来一起学习二叉树部分,先赞后看是好习惯。 一、树的概念及结构 1. 树的概念 树是一种非线性的数据结构,它是由n(n>0)个有…

阿里云服务器可以干什么?阿里云服务器主要用途是干嘛的?

阿里云服务器可以干嘛?能干啥你还不知道么!简单来讲可用来搭建网站、个人博客、企业官网、论坛、电子商务、AI、LLM大语言模型、测试环境等,阿里云百科aliyunbaike.com整理阿里云服务器的用途: 阿里云服务器活动 aliyunbaike.com…

SpringCloud Alibaba Sentinel 规则持久化

一、前言 接下来是开展一系列的 SpringCloud 的学习之旅,从传统的模块之间调用,一步步的升级为 SpringCloud 模块之间的调用,此篇文章为第十七篇,即使用 Sentinel 实现规则持久化。 二、概述 从前面我们做的实验可知,…

4/7 QT_day1

#include "mainwindow.h"MainWindow::MainWindow(QWidget *parent): QMainWindow(parent) {//窗口设置this->setWindowTitle("小黑子(little black son)");this->setWindowIcon(QIcon("D:\\qq文件\\Pitrue\\pictrue\\black.jpg"));this-&g…

【数据结构与算法】:快速排序和冒泡排序

一,快速排序 快速排序是一种比较复杂的排序算法,它总共有4种实现方式,分别是挖坑法,左右"指针"法,前后"指针"法,以及非递归的快速排序,并且这些算法中也会涉及多种优化措施…

Tokenize Anything via Prompting

SAM的延续,把SAM输出的token序列用来进行分类,分割和一个自然语言的decoder处理,但其实现在多模态的图像的tokenizer也几乎都是用VIT来实现的。一开始认为这篇文章可能是关于tokenize的,tokenize还是很重要的,后来看完…

若依框架学习——分页查询列表

条件查询【多条件】列表展示【分页】SaCheckPermissionTableName TableId NotBlank Page分页 响应数据封装类

JMeter+Ant+Jenkins构建接口报告(无人驾驶版)

展示结果: uc浏览器打开测试报告,绿色显示脚本结果 搭建操作步骤如下 1.jemter写好脚本 2.下载并配置ant环境变量:加上activation.jar、commons-lang3-3.8.1.jar、mail.jar 这3个包 mail.jar需要引用到jmeter 3.下载安装Jenkins 并进行构建…

CKA 基础操作教程(六)

Kubernetes Deployments 理论学习 在 Kubernetes 中,Deployments 是一种资源对象,用于定义和管理容器化应用程序的部署过程, 容器化应用的声明式定义:使用 Deployments ,可以声明性地定义应用程序的部署配置&#x…

Vue使用高德地图

1.在高德平台注册账号 2.我的 > 管理管理中添加Key 3.安装依赖 npm i amap/amap-jsapi-loader --save 或 yarn add amap/amap-jsapi-loader --save 4.导入 AMapLoade import AMapLoader from amap/amap-jsapi-loader; 5.直接上代码,做好了注释(初始化…

初识ES(ES的基本概念、倒排索引、索引和文档的CRUD)

1、ES是什么? 一个开源的分布式搜索引擎,可以用来实现搜索、日志统计、分析、系统监控等功能。ES的底层是基于Lucene实现的。 Lucene是一个Java语言的搜索引擎类库。 什么是elastic stack(ELK)? elasticsearch。存储、…