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

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

news 2026/2/7 13:15:21

文章目录

    • 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

鸿蒙中用HarmonyOS SDK应用服务 HarmonyOS5开发一个医院挂号小程序

一、开发准备 ​​环境搭建​​&#xff1a; 安装DevEco Studio 3.0或更高版本配置HarmonyOS SDK申请开发者账号 ​​项目创建​​&#xff1a; File > New > Create Project > Application (选择"Empty Ability") 二、核心功能实现 1. 医院科室展示 /…...

编程新知 2025/9/5 12:16:40

Robots.txt 文件

什么是robots.txt&#xff1f; robots.txt 是一个位于网站根目录下的文本文件&#xff08;如&#xff1a;https://example.com/robots.txt&#xff09;&#xff0c;它用于指导网络爬虫&#xff08;如搜索引擎的蜘蛛程序&#xff09;如何抓取该网站的内容。这个文件遵循 Robots…...

编程新知 2025/9/9 5:38:23

【JavaWeb】Docker项目部署

引言 之前学习了Linux操作系统的常见命令&#xff0c;在Linux上安装软件&#xff0c;以及如何在Linux上部署一个单体项目&#xff0c;大多数同学都会有相同的感受&#xff0c;那就是麻烦。 核心体现在三点&#xff1a; 命令太多了&#xff0c;记不住 软件安装包名字复杂&…...

编程新知 2026/2/4 16:07:02

MySQL账号权限管理指南：安全创建账户与精细授权技巧

在MySQL数据库管理中&#xff0c;合理创建用户账号并分配精确权限是保障数据安全的核心环节。直接使用root账号进行所有操作不仅危险且难以审计操作行为。今天我们来全面解析MySQL账号创建与权限分配的专业方法。 一、为何需要创建独立账号&#xff1f; 最小权限原则&#xf…...

编程新知 2025/9/5 23:36:27

深度学习习题2

1.如果增加神经网络的宽度&#xff0c;精确度会增加到一个特定阈值后&#xff0c;便开始降低。造成这一现象的可能原因是什么&#xff1f; A、即使增加卷积核的数量&#xff0c;只有少部分的核会被用作预测 B、当卷积核数量增加时&#xff0c;神经网络的预测能力会降低 C、当卷…...

编程新知 2026/1/26 5:53:30

AI病理诊断七剑下天山，医疗未来触手可及

一、病理诊断困局&#xff1a;刀尖上的医学艺术 1.1 金标准背后的隐痛 病理诊断被誉为"诊断的诊断"&#xff0c;医生需通过显微镜观察组织切片&#xff0c;在细胞迷宫中捕捉癌变信号。某省病理质控报告显示&#xff0c;基层医院误诊率达12%-15%&#xff0c;专家会诊…...

编程新知 2026/2/6 20:53:34

嵌入式学习笔记DAY33（网络编程——TCP）

一、网络架构 C/S &#xff08;client/server 客户端/服务器&#xff09;&#xff1a;由客户端和服务器端两个部分组成。客户端通常是用户使用的应用程序&#xff0c;负责提供用户界面和交互逻辑 &#xff0c;接收用户输入&#xff0c;向服务器发送请求&#xff0c;并展示服务…...

编程新知 2026/2/7 11:00:30

快刀集(1): 一刀斩断视频片头广告

一刀流&#xff1a;用一个简单脚本&#xff0c;秒杀视频片头广告&#xff0c;还你清爽观影体验。 1. 引子 作为一个爱生活、爱学习、爱收藏高清资源的老码农&#xff0c;平时写代码之余看看电影、补补片&#xff0c;是再正常不过的事。 电影嘛&#xff0c;要沉浸&#xff0c;…...

编程新知 2026/1/8 0:40:27

Git 3天2K星标：Datawhale 的 Happy-LLM 项目介绍（附教程）

引言 在人工智能飞速发展的今天&#xff0c;大语言模型&#xff08;Large Language Models, LLMs&#xff09;已成为技术领域的焦点。从智能写作到代码生成&#xff0c;LLM 的应用场景不断扩展&#xff0c;深刻改变了我们的工作和生活方式。然而&#xff0c;理解这些模型的内部…...

编程新知 2026/1/29 11:06:33

CVPR2025重磅突破：AnomalyAny框架实现单样本生成逼真异常数据，破解视觉检测瓶颈！

本文介绍了一种名为AnomalyAny的创新框架&#xff0c;该方法利用Stable Diffusion的强大生成能力&#xff0c;仅需单个正常样本和文本描述&#xff0c;即可生成逼真且多样化的异常样本&#xff0c;有效解决了视觉异常检测中异常样本稀缺的难题&#xff0c;为工业质检、医疗影像…...

编程新知 2026/2/5 4:18:48