解决for循环总是输出最后一个数组的值的办法并且实现不同位置的li加载不同的img地址图片

最新推荐文章于 2022-06-07 18:00:00 发布
最新推荐文章于 2022-06-07 18:00:00 发布
阅读量1.8k 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u013018357/article/details/51026018
版权
本文介绍如何解决在for循环中总是输出最后一个数组值的常见问题，并详细讲解如何实现在不同位置的li元素中加载不同的img地址图片，确保每个li元素对应正确的图片资源。
摘要由CSDN通过智能技术生成 
<ul id="list">    
        <li>按钮1<img src=""></li>    
        <li>按钮2<img src=""></li>    
        <li>按钮3<img src=""></li>    
        <li>按钮4<img src=""></li>    
        <li>按钮5<img src=""></li>    
</ul>  


js代码
var str = [0,1,2,3
最低0.47元/天 解锁文章
花生地瓜
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
解决vue的 v-for 循环中图片加载路径问题
12-08
先看一下产品需求，如下图所示， 产品要求图片和它的名称一一对应，本来是非常简单的需求，后台直接返回图片路径和名称，前台...数据结构如下：映射关系用对象表示，多个图片，所以放到一个数组中 [ { CnName:'荷
vue实现循环滚动列表
10-15
在Vue.js中实现循环滚动列表是一项常见的需求，特别是在构建数据密集型应用时，例如新闻滚动、商品轮播等。Vue-seamless-scroll是一款基于Vue的滚动插件，它提供了便捷的方式来实现这种效果。以下是实现这一功能的...
python入门级问题： for循环打印列表，怎么总是打最后1个
lelemom的博客
03-25 1万+
错误代码 错误分析：a = []放到for循环里面去了，每循环1次，就被重置成空1次， 执行结果：[5] #斐波那契数列 def fib(n): if n<2: return 1 else: return fib(n-1)+fib(n-2) for i in range(1,5): a = [] a.append(...
使用vue-cli中v-for遍历展示img时不显示的问题
Un1qu3的博客
07-30 433
使用vue-cli中v-for遍历展示img时不显示的问题 今天使用v-for遍历data中的对象显示本地图片时，data代码如下： logos:[ { name:"apple", logo:"../assets/img/phoneBrandsLogo/apple.png", }, .... ]
css 加随机数 引用_了解CSS组合器
weixin_39962199的博客
12-03 139
如何使用它们，为什么样式表通过使用所谓的选择器来引用HTML中的特定元素。这些选择器可以是Clsaa，ID，元素本身等。我们将在本文中重点介绍的选择器是combinator。它们以一种方式组合其他选择器，使它们彼此之间以及文档中内容的位置具有有用的关系。——MDN网络文档组合器可以通过最大化元素关联而不会使HTML淹没来确保CSS精确。看一下这个例子： Team 1 Player 1 ...
css里面li标签怎么加图片_Html ul、li Css标签详解 使用图片自定义样式 隐藏小点样式齐全...
weixin_42366095的博客
01-17 1073
前排丢一下本文大部分内容机器生成用的代码，贴一下供参考PHP关于li标签的用法我在使用过程中也是经常需要临时去查询，为了以后可以更快找到。还是自己总结一下，方便日后查看。本文涵盖了所有CSS自带的li标签样式效果，以及一个图片形式。(使用图片Url)引用自定义图片、语法：list-style-image : none | url (url)eg. li {list-style-image : ur...
【JS 的数组赋值踩坑，一直是最后一个值。深、浅拷贝分析】
我有满天星辰的博客
06-07 2159
JS 的数组赋值踩坑，一直是最后一个值。深、浅拷贝分析
Vue 中对图片地址进行拼接的方法
10-18
为了实现图片URL的正确拼接，我们可以使用`for`循环来处理数组中的每个对象。 以下是一个Vue实例中处理图片URL的示例： ```javascript export default { data() { return { singers: [], }; }, methods: { ...
用javascript实现li 列表数据隔行变换背景颜色
10-30
在这个例子中，我们有一个id为`list01`的`<ul>`元素，并预定义了两个CSS类，`.li01`和`.li02`，分别代表不同的背景颜色。 ```html <li class="title">title</li> <li>111</li> <li>222</li> <li>333</li> ...
Jjcarousellite 实现图片列表滚动的简单实例
09-04
**Jjcarousellite** 是一个轻量级的 jQuery 插件，用于创建图片列表的滚动效果。相较于 jcarousel，Jjcarousellite 更加精简，没有预设的皮肤，用户可以根据自己的需求自由定制前后按钮和选项卡按钮，生成的 HTML ...
解决for循环有时只输出最后一个结果
热门推荐
zhou_w_x的博客
03-05 1万+
我们平常用都是这样的 for (var i = 0; i < 3; i++) { console.log(i) } 有时候打印i出来的是2，也有时候是按照顺序打出来的，但是很不稳定。我们要操作就很麻烦， for (let i = 0; i < 3; i++) { console.log(i) } 把var换成let就可以了，因为let声明...
想学清楚循环 先搞定这个小学题目吧
码思客的博客
07-16 532
java零基础入门-核心语法篇(七) for 循环  前段时间网上有个小学题目火了，来看看   找外星人 这个题目一出，网上就炸锅了，这玩意是啥？看不懂，不会做，不明白，居然是个小学题目，各种受到1万点伤害啊。后来有大神发帖解答，才让众网友满血复活。其实这个题目的本质就是找规律。和我们这次要讲的 for 循环，还有点像，我们先看看这个题怎么解答的。   三个圈一个三角 看到没...
JS的for循环总是弹出最后一个值得解决方法
Hi,印象钟情
01-04 1万+
首先看一下HTML内容，现在我想得到标签内的索引和内容，你也许刷刷的写下以下代码： 但是结果却不尽人意，总是弹出“6----果敢”，比较好的解决方法有以下几种： 1、使用闭包 var els = document.getElementsByTagName("li"); for (i = 0; i < els.length; i++) { var el = els[i
FOR循环输出数据
weixin_45528946的博客
04-21 1907
需求：在控制台输出1-5 和5-1 格式： for（初始化语句；条件判断句；条件控制句）{ 循环体语句； } public class Java11 { public static void main(String[] args) { for(int i=1;i<=5;i++){ System.out.println(i); } } } public class Java11 { public static
vue for循环动态加载
最新发布
07-28
Vue.js 提供了 `v-for` 指令来实现循环动态加载。你可以在 Vue 的模板中使用 `v-for` 来遍历数组或对象，并根据数据动态生成相应的 DOM 元素。 下面是一个简单的示例，展示如何使用 `v-for` 进行循环动态加载： ```html <div id="app"> <ul> <li v-for="item in items" :key="item.id">{{ item.name }}</li> </ul> </div> ``` ```javascript new Vue({ el: '#app', data: { items: [ { id: 1, name: 'Item 1' }, { id: 2, name: 'Item 2' }, { id: 3, name: 'Item 3' } ] } }); ``` 在上面的示例中，我们使用 `v-for` 遍历 `items` 数组，并将每个元素的 `name` 属性渲染到 `<li>` 元素中。`:key` 是必需的，它用于给每个生成的元素提供唯一的标识，以优化 Vue 的渲染性能。 你可以根据实际需求调整模板和数据，以实现你想要的循环动态加载效果。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值