Vue-03

Vue指令

  • v-bind
    作用:动态设置html的标签属性(src url title…)
    语法:v-bind:属性名="表达式"
    举例代码如下:
    1a
    实现效果如下:
    1b

  • 案例:图片切换
    实现代码如下:
    2a

    实现的效果如下图所示,在第一张照片上。index = 0,所以没有上一页这个按钮。

    2b

    点击下一页,显示下一张图,效果如图所示:

    2c

    在最后一张图,index = list.length - 1,因此没有下一页这个按钮:

    2d

  • v-for
    作用:基于数据循环,多次渲染整个元素。 (数组、对象、数组…)
    遍历数组语法:v-for="(item, index) in 数组"
    item 每一项,index 下标。
    使用代码如下:
    3a
    效果如下:
    3b

  • 图书管理案例 - 书架
    需求:

    1. 基本渲染 → v-for
    2. 删除功能


    使用v-for进行基本渲染后,效果如图,其中 item 代表的是 bookList 中的每一行:

    3c

    对于此,做了如下改进,将作者和姓名列出,效果如下:

    3d

    接下来,开始实现删除功能(数据驱动),本质上就是要删除数组里面的对应项,实现此功能有两种思路,一个是根据 index 删除,另一个是根据 id 删除。
    这两种方式优先使用后者(有 id 优先使用 id )
    以下代码可以实现删除功能:

    3e

    上述代码还有一点小瑕疵,为进一步完善,在 v-for 中加入了key
    语法:key属性 = "唯一标识"

    下面展示加 key 与不加 key 的区别,为此讲 li 标签的 background属性设为pink,得到的样式如下:
    4a

    在没有 key 的时候,点击删除红楼梦这一项之后,可以发现刚才的 li 还在(背景仍为粉色),只是里面的文字内容改变了:
    4b
    而加入 key 之后,key 的作用在于:给元素添加的唯一标识,便于 Vue 进行列表项的正确排序复用。
    加入 key 后点击删除的效果如图:

    <li v-for="(item, index) in bookList" :key="item.id">
    

4c

注意点:

  1. key 的值只能是字符串或数字类型
  2. key 的值必须具有唯一性
  3. 推荐使用id 作为 key(唯一),不推荐 index 作为 key(会变化,不对应)
  • v-model
    作用:给表单元素使用,双向数据绑定 → 可以快速获取或设置表单元素内容

    1. 数据变化 → 视图自动更新
    2. 视图变化 → 数据自动更新

    语法:v-model = '变量'
    实现代码示例如下(代码中实现了重置功能):
    5a

  • 综合案例 - 记事本
    需求:

    1. 列表渲染
    2. 删除功能
    3. 添加功能
    4. 底部统计和清空

    首先,使用以下代码实现列表渲染:
    6a
    6b
    其次,注册点击事件,实现删除功能。
    7a
    7b
    然后来实现添加功能,此功能分为两个核心步骤。

    1. 通过 v-model 绑定输入框 → 实时获取表单元素的内容
    2. 点击按钮,进行新增,往数组最前面加 unshift
      代码实现如下:
      8a
      8b
      最后,实现底部统计和清空功能,同时进一步优化,如果当前没有任务了,不要显示底部统计和清空功能。

9

10
关于记事本的完整代码如下(没有添加css样式):
11a

11b

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

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

相关文章

Redis面试问题纯享版

基础内容 1、简单介绍以下你了解的Redis 2、对比一下Redis和Memcache的异同&#xff1f; 3、为什么MySQL选用Redis作为缓存&#xff1f; 4、详细聊聊你对Redis各种数据类型的了解&#xff1f; 5、Redis中五种基本数据类型的底层数据结构是什么样的&#xff1f; Redis线程模型…

好物周刊#43:设计素材下载

https://yuque.com/cunyu1943 村雨遥的好物周刊&#xff0c;记录每周看到的有价值的信息&#xff0c;主要针对计算机领域&#xff0c;每周五发布。 一、项目 1. frp 一个专注于内网穿透的高性能的反向代理应用&#xff0c;支持 TCP、UDP、HTTP、HTTPS 等多种协议&#xff0c…

大华IPC网络摄像机如何保存视频

一、背景 通常网络相机&#xff08;IPC&#xff09;不会自带存储功能&#xff0c;需要接入录像机&#xff08;NVR&#xff09;进行保存。 其中NVR也分软件存储及硬件存储&#xff0c;这里不提&#xff0c;这边单独说FTP存储 二、配置前提 要配置FTP存储需要&#xff1a;①网络…

centos7迁移龙蜥anolis8.8-内网

一、离线仓库搭建 在内网搭建龙蜥镜像站 CentOS7下同步阿里云CentOS7镜像建本地yum仓库基本步骤 1、更新本地yum-关闭防火墙 # 将vim设置为黏贴模式&#xff0c;防止复制时自动缩进 echo "set paste" >> /root/.vimrc#设置防火墙为 Iptables 并设置空规则 s…

初识openGauss

一、openGauss 的介绍 openGauss 是一款全面友好开放&#xff0c;携手伙伴共同打造的企业级开源关系型数据库。openGauss 提供面向多核架构的极致性能、全链路的业务、数据安全、基于 AI 的调优和高效运维的能力。openGaus 深度融合华为在数据库领域多年的研发经验&#xff0c…

【python进阶篇】面向对象编程(1)

面向对象编程——Object Oriented Programming&#xff0c;简称OOP&#xff0c;是一种程序设计思想。OOP把对象作为程序的基本单元&#xff0c;一个对象包含了数据和操作数据的函数。 在Python中&#xff0c;所有数据类型都可以视为对象&#xff0c;当然也可以自定义对象。自定…

Stable Diffusion 模型分享:DucHaiten-AIart-SDXL(动漫、3D、逼真)

本文收录于《AI绘画从入门到精通》专栏&#xff0c;专栏总目录&#xff1a;点这里。 文章目录 模型介绍生成案例案例一案例二案例三案例四案例五案例六案例七案例八 下载地址 模型介绍 这是一个丰富多彩的 SDXL 模型&#xff0c;可以绘制动漫、3D、科幻、真实等类型的图片。 …

pyqt进入当前系统shell界面

在PyQt中可以使用QProcess类来运行外部命令并获取其输出。要进入当前系统的Shell界面&#xff0c;可以通过调用操作系统相关的命令来完成。 下面是一个示例代码&#xff0c;展示了如何在PyQt应用程序中打开当前系统的Shell界面&#xff1a; import sys from PyQt5.QtWidgets …

【开源物联网平台】FastBee认证方式和MQTT主题设计

&#x1f308; 个人主页&#xff1a;帐篷Li &#x1f525; 系列专栏&#xff1a;FastBee物联网开源项目 &#x1f4aa;&#x1f3fb; 专注于简单&#xff0c;易用&#xff0c;可拓展&#xff0c;低成本商业化的AIOT物联网解决方案 目录 一、接入步骤 1.1 设备认证 1.2 设备交…

Unity 动画(旧版-新版)

旧版 旧版-动画组件&#xff1a;Animation 窗口-动画 动画文件后缀: .anim 将制作后的动画拖动到Animation组件上 旧版的操作 using System.Collections; using System.Collections.Generic; using UnityEngine;public class c1 : MonoBehaviour {// Start is called before…

C语言学习--摩尔投票算法

目录 1.引入 2.摩尔投票算法 3.具体步骤 3.1抵消阶段 3.2检验过程 4.代码实现 5.总结 1.引入 今天做题看到一个解题思路真的看不懂&#xff0c;一艘才知道是这个算法。 int majorityElement(int* nums, int numsSize) { int notenums[0]; int count1; for(int i1;i<n…

MES+APS难度地狱级,搞定它就是劫后余生呀。

一、什么是MES和APS MES&#xff08;Manufacturing Execution System&#xff09;和APS&#xff08;Advanced Planning and Scheduling&#xff09;是两种在制造业中常用的软件系统&#xff0c;用于优化生产过程和提高生产效率。 MES是一种用于管理和监控制造过程的系统。它与…

稀碎从零算法笔记Day11-LeetCode:有效的字母异位词

题型&#xff1a;字符串、哈希表、排序 链接&#xff1a;242. 有效的字母异位词 - 力扣&#xff08;LeetCode&#xff09; 来源&#xff1a;LeetCode 题目描述 给定两个字符串 s 和 t &#xff0c;编写一个函数来判断 t 是否是 s 的字母异位词。 注意&#xff1a;若 s 和 …

SAP Parallel Accounting(平行分类账业务)配置及操作手册(超详细的说明和测试)

SAP Parallel Accounting(平行分类账业务)配置及操作手册 1、Overview 为了适应不同的会计准则&#xff0c;SAP在新总账中启用了多分类账&#xff0c;&#xff08;其作用简单来说就是&#xff0c;同时一笔记账&#xff0c;会产生多个账套的凭证。&#xff09;分类账可以对应一…

C#使用Queue<T>类进行队列设计

目录 一、涉及到的知识点 1.Queue类 2.Queue类的方法和属性 二、使用C# Queue类的实例 一、涉及到的知识点 1.Queue类 C#中确实提供了队列类Queue。队列是一种先进先出&#xff08;FIFO&#xff09;的数据结构&#xff0c;用于存储和操作对象的有序集合。在C#中&#xff0…

搜索-BFS Meteor Shower S(流星雨)

Meteor Shower S&#xff08;流星雨&#xff09; 题目连接 题目描述 贝茜听说一场特别的流星雨即将到来&#xff1a;这些流星会撞向地球&#xff0c;并摧毁它们所撞击的任何东西。她为自己的安全感到焦虑&#xff0c;发誓要找到一个安全的地方&#xff08;一个永远不会被流星…

Oracle控制文件control file(2)查看控制文件内容的三中方法

导读 本文介绍如何查看控制文件的内容 可以通过下面两种方法查看控制文件的内容 使用strings命令查看使用视图v$controlfile_record_session查看转储控制文件到一个文本文件&#xff0c;然后查看文本文件的内容 1、使用strings命令查看控制文件内容 strings <控制文件名&g…

银行数字化转型导师坚鹏:银行数字化转型案例研究

银行数字化转型案例研究 课程背景&#xff1a; 数字化背景下&#xff0c;很多银行存在以下问题&#xff1a; 不清楚银行科技金融数智化案例&#xff1f; 不清楚银行供应链金融数智化案例&#xff1f; 不清楚银行普惠金融数智化案例&#xff1f; 不清楚银行跨境金融数智…

【C语言】【字符串函数】【超详解】【上】!!!

前言&#xff1a; 在学习C语言的过程中&#xff0c;字符串、字符数组等对新手来说总是会有疏忽&#xff0c;在已有的库函数中&#xff0c;我们平时用到最多的就是关于字符串的函数&#xff0c;今天我们就来详细学习字符串函数的相关内容。 下面我们就开始讲解字符串函数&#x…

Eclipse左边project框如何打开?

1、点击Eclipse顶端window 2、点击Show View 3、点击Project Explorer。 如下图&#xff08;图片转自其他博主&#xff09;。