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

Vue2教程003：Vue指令之v-bind和v-for

news 2025/12/20 14:49:40

文章目录

    • 2.6 v-bind
    • 2.7 图片轮播案例
    • 2.8 v-for
    • 2.9 图书管理案例

2.6 v-bind

  1. 作用：动态设置html的标签属性->src、url、title…
  2. 语法：v-bind:属性名="表达式"

动态设置img标签的src属性：

<body>
<div id="app"><img class="image" v-bind:src="imgUrl" alt="图片" />
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>
<script>const app = new Vue({el: '#app',data: {imgUrl: './images/02.jpg'},methods:{}})
</script>
</body>

注意：v-bind:src可以简写为:src，即v-bind可以省略。

2.7 图片轮播案例

核心思路分析：

  • 数组存储图片路径->[图片1, 图片2, 图片3, ...]
  • 准备下标index，数组[下标] -> v-bind设置src展示图片 -> 修改下标切换图片

代码示例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<div id="app"><button v-show="index>0" @click="index--">上一页</button><div class="box"><img class="image" :src="list[index]" alt=""/></div><button v-show="index<list.length-1" @click="index++">下一页</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>
<script>const app = new Vue({el: '#app',data: {index: 0,list: ['./images/01.jpg','./images/02.jpg','./images/03.jpg','./images/04.jpg',]},methods: {}})
</script></body>
<style>.box {border: 1px solid gray;width: 320px;}.image {width: 300px;margin: 10px;}
</style>
</html>

运行效果：

在这里插入图片描述

涉及的知识点：

  • v-show
  • 点击事件
  • 数组

2.8 v-for

作用：基于数据循环，多次渲染整个元素。

适用类型：数组、对象、数字。

遍历数组语法：v-for="(item, index) in 数组"，item每一项，index下标

代码示例：

<body>
<div id="app"><h3>NBA-太阳队</h3><ul><li v-for="(item, index) in list">{{ item }} -- {{ index }}</li></ul>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>
<script>const app = new Vue({el: '#app',data: {list: ['Durant', 'Book', 'Beal']},methods: {}})
</script>
</body>

运行效果：

在这里插入图片描述

2.9 图书管理案例

代码示例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<div id="app"><h3>我的书籍</h3><el-table:data="bookList"stripeborderstyle="width: 50%"><el-table-columnprop="id"label="书架号"width="180"></el-table-column><el-table-columnprop="name"label="书籍名称"width="180"></el-table-column><el-table-columnprop="author"label="作者"></el-table-column><el-table-columnwidth="100"label="操作"><template slot-scope="scope"><el-button size="mini" type="danger" @click="del(scope.row.id)">删除</el-button></template></el-table-column></el-table>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>const app = new Vue({el: '#app',data: {bookList: [{id: 1,name: '《长安的荔枝》',author: '马伯庸'},{id: 2,name: '《明朝那些事儿》',author: '当年明月'},{id: 3,name: '《平凡的世界》',author: '路遥'}]},methods: {del(id) {// filter：根据条件，保留满足条件的对应项// filter：不会改变原来的数组，而是得到一个新的数组this.bookList = this.bookList.filter(item => item.id !== id);}}})
</script>
</body>
</html>

运行效果：

在这里插入图片描述

注意：

  • filter的使用。
    • 根据条件，保留满足条件的对应项。
    • 不会改变原来的数组，而是得到一个新的数组
  • html网页中element-ui前端组件的使用。
    • 引入样式
      • <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    • 引入组件库
      • `<script src="https://unpkg.co

相关文章：

Vue2教程003：Vue指令之v-bind和v-for

文章目录 2.6 v-bind2.7 图片轮播案例2.8 v-for2.9 图书管理案例 2.6 v-bind 作用&#xff1a;动态设置html的标签属性->src、url、title…语法&#xff1a;v-bind:属性名"表达式" 动态设置img标签的src属性&#xff1a; <body> <div id"app&quo…...

编程日记 2024/11/26 8:23:13

Pathlib操作文件IN Python

系列文章目录 文章目录 目录 系列文章目录 文章目录 前言 一、Pathlib是什么&#xff1f; 二、使用步骤 前言 pathlib 是 Python 标准库中用于操作文件和目录路径的模块&#xff0c;自 Python 3.4 起引入。它提供了一种面向对象的方式处理路径&#xff0c;使路径操作更加简洁、…...

编程日记 2024/11/26 8:21:11

AOC显示器915Sw按键失灵维修记

大家好&#xff0c;我是 程序员码递夫 今天给大家分享的是自己维修老古董AOC液晶显示器按键失灵的的过程&#xff0c;实属DIY记录。 1、引子 家里有台老古董的19寸AOC液晶显示器&#xff08;型号915Sw&#xff09;, 一直作为我的副显示器陪伴着左右&#xff0c;显示还正常&a…...

编程日记 2024/11/26 8:15:04

霍曼转移方法介绍

霍曼转移方法介绍 背景 在航天工程中&#xff0c;轨道转移是指航天器从一个轨道移动到另一个轨道的过程。为了高效利用燃料并缩短转移时间&#xff0c;科学家们开发了多种轨道转移方法。其中&#xff0c;霍曼转移&#xff08;Hohmann Transfer&#xff09;因其燃料效率高、计…...

编程日记 2024/11/26 8:14:02

我的创作之路：机缘、收获、日常与未来的憧憬

目录 前言机缘收获 日常成就一个优化后的二分查找实现 憧憬 前言 每个人的成长旅程都有它独特的轨迹&#xff0c;而我的这段技术创作之路&#xff0c;则源于一次再普通不过的项目分享。 机缘 一切的开始其实是偶然。在一次项目中&#xff0c;我遇到了一个棘手的问题&#xf…...

编程日记 2024/11/26 8:13:01

《硬件架构的艺术》笔记（六）：处理字节顺序

介绍 本章主要介绍字节顺序的的基本规则。&#xff08;感觉偏软件了&#xff0c;不知道为啥那么会放进《硬件架构的艺术》这本书&#xff09;。 定义 字节顺序定义数据在计算机系统中的存储格式&#xff0c;描述存储器中的MSB和LSB的位置。对于数据始终以32位形式保存在存储器…...

编程日记 2024/11/26 8:10:59

AddIPAddress添加临时IP后，socket bind失败

问题描述 在Win10\Win11下使用addIPAddress添加临时IP成功后&#xff0c;立即创建socket&#xff0c;bind失败 if(!m_socket->bind(QHostAddress(m_localIP), listenPort)) {qCritical() << QString("bind error %1").arg(m_socket->errorString());re…...

编程日记 2024/11/26 8:09:57

关于IDE的相关知识之一【使用技巧】

成长路上不孤单&#x1f60a;&#x1f60a;&#x1f60a;&#x1f60a;&#x1f60a;&#x1f60a; 【14后&#x1f60a;///C爱好者&#x1f60a;///持续分享所学&#x1f60a;///如有需要欢迎收藏转发///&#x1f60a;】 今日分享关于ide使用技巧的相关内容&#xff01; 关于…...

编程日记 2024/11/26 8:07:54

线性代数在人工智能领域中的实践

一、机器学习中的线性代数应用 在机器学习中&#xff0c;线性代数主要用于构建和训练各种模型&#xff0c;如线性回归、逻辑回归、支持向量机等。这些模型在数据的特征提取、降维处理以及分类等方面发挥了重要作用。 线性回归&#xff1a;线性回归是最简单的机器学习算法之一…...

编程日记 2024/11/26 8:06:52

图片生成视频-右进

右侧进入 ffmpeg -loop 1 -i image.jpg -f lavfi -i colorcblack:s1280x720:d20 -filter_complex "[1:v]formatrgba[bg];[0:v]formatrgba,scale1280:720[img];[bg][img]overlayxif(lt(t,3),W,if(lt(t,8),W-(t-3)*W/5,0)):y(H-h)/2:enablegte(t,3)" -c:v libx264 -t 2…...

编程日记 2024/11/26 8:04:50

3、集线器、交换机、路由器、ip的关系。

集线器、交换机、路由器三者的关系 1、集线器2、交换机&#xff08;每个交换机是不同的广播域&#xff0c;ip地址起到划分广播域的作用&#xff09;3、 路由器4、ip地址 所有图片和资料均来源于B站&#xff1a;网络安全收藏家 1、集线器 一开始两台电脑通信就需要网线就可以&a…...

编程日记 2024/11/26 8:03:48

w~视觉~合集25

我自己的原文哦~ https://blog.51cto.com/whaosoft/12627822 #Mean Shift 简单的介绍 Mean Shift 的数学原理和代码实现,基于均值漂移法 Mean Shift 的图像分割 Mean Shift 算法简介 从分割到聚类 对于图像分割算法&#xff0c;一个视角就是将图像中的某些点集分为一类&a…...

编程日记 2024/11/26 7:57:41

Applicaiton配置文件

server:port: 8080 # 配置 Spring Boot 启动端口&#xff0c;默认为 8080mybatis-plus:mapper-locations: classpath:com/xtl/mapper/xml/*.xml # 指定 MyBatis Mapper XML 文件的路径&#xff0c;确保 MyBatis 能够正确加载 Mapper 文件global-config:db-config:id-type: au…...

编程日记 2024/11/26 7:56:40

（已解决）wps无法加载此加载项程序mathpage.wll

今天&#xff0c;在安装Mathtype的时候遇到了点问题&#xff0c;如图所示 尝试了网上的方法&#xff0c;将C:\Users\Liai_\AppData\Roaming\Microsoft\Word\STARTUP路径中的替换为32位的Mathtype加载项。但此时&#xff0c;word又出现了问题 后来知道了&#xff0c;这是因为64位…...

编程日记 2024/11/26 7:51:33

ubity3D基础

Unity是一个流行的游戏开发引擎&#xff0c;它使用C#作为其主要的编程语言。以下是一些Unity中C#编程的基础概念&#xff1a; • Unity编辑器&#xff1a; • Unity编辑器是Unity游戏引擎的核心&#xff0c;提供了一个可视化界面&#xff0c;用于创建和管理游戏项目。 • C#脚本…...

编程日记 2024/11/26 7:50:32

Python2和Python3的区别

和python 2.x相比&#xff0c;python 3.x版本在语句输出、编码、运算和异常等方面做出了一些调整&#xff0c;我们这篇文章就对这些调整做一个简单的介绍。 Python3.x print函数代替了print语句 在python 2.x中&#xff0c;输出数据使用的是print语句&#xff0c;例如&#xff…...

编程日记 2024/11/26 7:43:26

Spring框架整合单元测试

目录 一、配置文件方式 1.导入依赖 2.编写类和方法 3.配置文件applicationContext-test.xml 4.测试类 5.运行结果 二、全注解方式 1.编写类和方法 2.配置类 3.测试类 4.运行结果 每次进行单元测试的时候&#xff0c;都需要编写创建工厂&#xff0c;加载配置文件等相关…...

编程日记 2024/11/26 7:42:24

docker-mysql

一、创建mysql 1、docker run --name mysql8.0-container -e MYSQL_ROOT_PASSWORDmy-secret-pw -d -p 3306:3306 mysql:8.0 参数解释&#xff1a; --name mysql8.0-container&#xff1a;指定容器的名称为mysql8.0-container。 -e MYSQL_ROOT_PASSWORDmy-secret-pw&#xff1a…...

编程日记 2024/11/26 7:39:20

Java程序基础⑤Java数组的定义和使用+引用的概念

目录 1. Java数组的基本概念 1.1 数组的定义 1.2 数组存在的意义 1.3 数组的使用 1.4 二维数组 2. 引用类型JVM的内存分布 2.1 JVM的内存分布 2.2 基本数据类型和引用型数据类型的区别 2.3 引用注意事项 2.4 传值传递 3. 数组总结和应用场景 3.1 一维数组和二维数组…...

编程日记 2024/11/26 7:38:18

electron主进程和渲染进程之间的通信

主进程 (main.js) const { app, BrowserWindow, ipcMain } require("electron"); const path require("node:path"); // 导入fs模块 const fs require("fs");const createWindow () > {const win new BrowserWindow({width: 800,height…...

编程日记 2024/11/26 7:36:16

【kafka】Golang实现分布式Masscan任务调度系统

要求&#xff1a; 输出两个程序&#xff0c;一个命令行程序&#xff08;命令行参数用flag&#xff09;和一个服务端程序。 命令行程序支持通过命令行参数配置下发IP或IP段、端口、扫描带宽&#xff0c;然后将消息推送到kafka里面。 服务端程序&#xff1a; 从kafka消费者接收…...

编程新知 2025/12/19 2:48:03

服务器--宝塔命令

一、宝塔面板安装命令 ⚠️ 必须使用 root 用户 或 sudo 权限执行&#xff01; sudo su - 1. CentOS 系统&#xff1a; yum install -y wget && wget -O install.sh http://download.bt.cn/install/install_6.0.sh && sh install.sh2. Ubuntu / Debian 系统…...

编程新知 2025/10/3 10:56:48

jdbc查询mysql数据库时，出现id顺序错误的情况

我在repository中的查询语句如下所示&#xff0c;即传入一个List<intager>的数据&#xff0c;返回这些id的问题列表。但是由于数据库查询时ID列表的顺序与预期不一致&#xff0c;会导致返回的id是从小到大排列的&#xff0c;但我不希望这样。 Query("SELECT NEW com…...

编程新知 2025/12/6 19:21:54

数据结构第5章：树和二叉树完全指南（自整理详细图文笔记）

名人说&#xff1a;莫道桑榆晚&#xff0c;为霞尚满天。——刘禹锡&#xff08;刘梦得&#xff0c;诗豪&#xff09; 原创笔记&#xff1a;Code_流苏(CSDN)&#xff08;一个喜欢古诗词和编程的Coder&#x1f60a;&#xff09; 上一篇&#xff1a;《数据结构第4章 数组和广义表》…...

编程新知 2025/12/16 20:16:35

门静脉高压——表现

一、门静脉高压表现 00:01 1. 门静脉构成 00:13 组成结构&#xff1a;由肠系膜上静脉和脾静脉汇合构成&#xff0c;是肝脏血液供应的主要来源。淤血后果&#xff1a;门静脉淤血会同时导致脾静脉和肠系膜上静脉淤血&#xff0c;引发后续系列症状。 2. 脾大和脾功能亢进 00:46 …...

编程新知 2025/12/16 4:02:44

嵌入式面试常问问题

以下内容面向嵌入式/系统方向的初学者与面试备考者，全面梳理了以下几大板块，并在每个板块末尾列出常见的面试问答思路，帮助你既能夯实基础，又能应对面试挑战。 一、TCP/IP 协议 1.1 TCP/IP 五层模型概述 链路层（Link Layer） 包括网卡驱动、以太网、Wi‑Fi、PPP 等。负责…...

编程新知 2025/12/6 1:29:03

五、jmeter脚本参数化

目录 1、脚本参数化 1.1 用户定义的变量 1.1.1 添加及引用方式 1.1.2 测试得出用户定义变量的特点 1.2 用户参数 1.2.1 概念 1.2.2 位置不同效果不同 1.2.3、用户参数的勾选框 - 每次迭代更新一次 总结用户定义的变量、用户参数 1.3 csv数据文件参数化 1、脚本参数化 …...

编程新知 2025/12/19 14:18:06

高保真组件库：开关

一：制作关状态 拖入一个矩形作为关闭的底色：44 x 22，填充灰色CCCCCC，圆角23，边框宽度0，文本为”关“，右对齐，边距2,2,6,2，文本颜色白色FFFFFF。 拖拽一个椭圆，尺寸18 x 18，边框为0。3. 全选转为动态面板状态1命名为”关“。 二：制作开状态 复制关状态并命名为”开…...

编程新知 2025/12/3 12:57:00

Git 命令全流程总结

以下是从初始化到版本控制、查看记录、撤回操作的 Git 命令全流程总结&#xff0c;按操作场景分类整理&#xff1a; 一、初始化与基础操作 操作命令初始化仓库git init添加所有文件到暂存区git add .提交到本地仓库git commit -m "提交描述"首次提交需配置身份git c…...

编程新知 2025/10/22 3:22:49

简约商务通用宣传年终总结12套PPT模版分享

IOS风格企业宣传PPT模版&#xff0c;年终工作总结PPT模版&#xff0c;简约精致扁平化商务通用动画PPT模版&#xff0c;素雅商务PPT模版 简约商务通用宣传年终总结12套PPT模版分享:商务通用年终总结类PPT模版https://pan.quark.cn/s/ece1e252d7df...

编程新知 2025/11/24 18:24:43