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

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

news 文章来源：https://blog.csdn.net/WwLK123/article/details/144042689 2025/4/21 11:43:17

文章目录

    • 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

uniapp 安卓和ios震动方法，支持息屏和后台震动，ios和安卓均通过测试

最近使用uniapp开发震动功能&#xff0c;发现uniapp提供的 uni.vibrateLong()的方法震动比较弱&#xff0c;而且不支持息屏和后台震动。plus.ios.importClass("UIImpactFeedbackGenerator")是在网上看到的&#xff0c;这个震动也比较弱&#xff0c;ios也不支持息屏和…...

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

# DBeaver 连接hive数仓

前提 前提是基于hadoop的hive服务已经启动&#xff0c;其中hive的服务包括metastore元数据服务和hiveserver2服务已经启动。hiveserver2服务在默认端口10000启动&#xff0c;且通过telnet xx.xx.xx.xx 10000 能通。 满足以上要求后&#xff0c;再可以看以下连接文档&#xff…...

编程日记 2024/11/26 7:31:10

STM32H7开发笔记（2）——H7外设之多路定时器中断

STM32H7开发笔记&#xff08;2&#xff09;——H7外设之多路定时器中断 文章目录 STM32H7开发笔记&#xff08;2&#xff09;——H7外设之多路定时器中断0.引言1.CubeMX配置2.软件编写 0.引言 本文PC端采用Win11STM32CubeMX4.1.0.0Keil5.24.2的配置&#xff0c;硬件使用STM32H…...

编程日记 2024/11/26 7:30:09

Pytorch使用手册-Build the Neural Network（专题五）

在 PyTorch 中如何构建一个用于 FashionMNIST 数据集分类的神经网络模型，并解析了 PyTorch 的核心模块 torch.nn 的使用方法。以下是具体内容的讲解： 构建神经网络 在 PyTorch 中，神经网络的核心在于 torch.nn 模块，它提供了构建神经网络所需的所有工具。关键点如下： nn.…...

编程日记 2024/11/26 7:27:06

16. Springboot集成Tika实现文档解析

目录 1、什么是Tika 2、基本特性 3、Tika可视化提取 4、Springboot集成 4.1、maven依赖 4.2、Tika配置文件 4.3、注入tika bean 4.4、Service类 4.5、测试类TikaParserDemoTest 1、什么是Tika Tika是一款Apache开源的&#xff0c;跨平台&#xff0c;支持多品种文本类…...

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

【单片机毕业设计12-基于stm32c8t6的智能称重系统设计】

【单片机毕业设计12-基于stm32c8t6的智能称重系统设计】 前言一、功能介绍二、硬件部分三、软件部分总结 前言 &#x1f525;这里是小殷学长&#xff0c;单片机毕业设计篇12-基于stm32c8t6的智能称重系统设计 &#x1f9ff;创作不易&#xff0c;拒绝白嫖可私 一、功能介绍 ----…...

编程日记 2024/11/26 7:25:03

[网络]无线通信中的AMPDU

定义 AMPDU&#xff08;Aggregate MAC Protocol Data Unit&#xff09;即聚合MAC协议数据单元。在无线通信中&#xff0c;特别是在IEEE 802.11n及后续的Wi - Fi标准&#xff08;如802.11ac、802.11ax&#xff09;中&#xff0c;它是一种用于提高数据传输效率的技术。简单来说&a…...

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

[QDS]从零开始，写第一个Qt Design Studio到程序调用的项目

前言 最近在使用Qt Design Studio进行开发&#xff0c;但是简中网上要不就是只搜得到Qt Designer(Qt Creator内部库)&#xff0c;要不就只搜得到一点营销号不知道从哪里搬来的账号&#xff0c;鉴于Qt Design Studio是一个这么强大的软件&#xff0c;自然是需要来进行一下小小的…...

编程日记 2024/11/26 7:23:01

Selenium Chrome Options 总结

ChromeOptions 是 Selenium 提供的一种工具&#xff0c;用于配置和自定义 Chrome 浏览器的启动行为。通过设置 ChromeOptions&#xff0c;可以添加扩展功能、设置无头模式、禁用弹窗等&#xff0c;满足多种测试需求。 1. 基本用法 初始化和应用 ChromeOptions from selenium…...

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

11、PyTorch中如何进行向量微分、矩阵微分与计算雅克比行列式

文章目录 1. Jacobian matrix2. python 代码 1. Jacobian matrix 计算 f ( x ) [ f 1 x 1 2 2 x 2 f 2 3 x 1 4 x 2 2 ] , J [ ∂ f 1 ∂ x 1 ∂ f 1 ∂ x 2 ∂ f 2 ∂ x 1 ∂ f 2 ∂ x 2 ] [ 2 x 1 2 3 8 x 2 ] \begin{equation} f(x)\begin{bmatrix} f_1x_1^22x_2\\…...

编程日记 2024/11/26 7:17:55