Vue如何循环渲染图片
Vue如何把服务器返回的图片数据渲染出来
- 首先,一般来说,当请求图片的接口时,会返回一个数组,这个数组里会是一些图片的名字,比如1.jpg,2.jpg。
- 我的做法是先在data里定义一个数组,来存储服务器返回的图片名
urlName: [
'这里面放服务器返回的图片名数据'
],
- 图片地址的构成是http地址+图片名,比如
https://i0.hdslb.com/bfs/activity-plat/static/20190404/f21c9a9573c71006d7898b5740803822/r1C1JNXFN.png@125w_160h.webp
- 由于是一个图库的功能,所以用了for循环。这里要注意的是拼接src的地址,如果不用变量存起来,就只有原本的第一个li有这个地址,后面循环出的则只有图片名。
<ul class="photoList">
<li v-for="(item,index) in urlName" :key="index">
<!-- imgurl里放的是前面的http地址,在data里定义 -->
<img :src="imgUrl+item" alt> 这里进行拼接
</li>
</ul>
- 以上就完成了对图片的循环渲染啦!
Vue如何循环渲染图片的更多相关文章
- vue3——vue数据循环渲染
博客地址 :https://www.cnblogs.com/sandraryan/ vue循环渲染 <!DOCTYPE html> <html lang="en" ...
- vue如何循环渲染element-ui中table内容
对于大多数前端开发者来说,vuejs+element-ui是开发后台管理系统过程中必不可少的技术框架.而后台管理系统中,最常见的形式就是表格和表单,以便用来增删改查. element-ui中table ...
- vue input 循环渲染问题
<li> <span>下属区县:</span> <div class="quxianList" v-for="(qx,index ...
- vue.js循环for(列表渲染)详解
vue.js循环for(列表渲染)详解 一.总结 一句话总结: v-for <ul id="example-1"> <li v-for="item in ...
- Vue学习笔记(三)条件渲染和循环渲染
目录 一.条件渲染 1. v-if 2. 与v-else配合使用 3. 与v-else-if配合使用 4. v-show的使用 5. 类型切换案例 二.列表渲染 1. 遍历数组 2. 遍历对象 获取v ...
- vue + element 动态渲染、移除表单并添加验证
博客地址:https://ainyi.com/66 又接到新需求了吧~~ 背景 在一个大表单里,有可能会出现这种需求,用户可以自己操作动态添加.移除表单,更加个性化的效果. 常见于填写个人信息.附加内 ...
- vue2.* 目录结构分析 数据绑定 循环渲染数据 数据渲染02
一.目录 结构分析 node_modules:项目依赖文件(也可以说是模块) src:开发时所用的资源 assets:静态资源文件 App.vue:根组件(最基础的公共页面) main.js:实例化v ...
- vue+element-ui中的图片获取与上传
vue+element-ui中的图片获取与上传 工作上接触了一下图片的处理,图片的格式是文件流, 记录如下. 请求图片 请求图片的时候,带上{ responseType: 'blob' }, 否则图片 ...
- 【03】Vue 之列表渲染及条件渲染
3.1. 条件渲染 有时候我们要根据数据的情况,决定标签是否进行显示或者有其他动作.最常见的就是,表格渲染的时候,如果表格没有数据,就显示无数据.如果有数据就显示表格数据. Vue帮我们提供了一个v- ...
随机推荐
- sublime text 3中browsersync的使用
1.在项目所在位置右键选择Git Bash Here 2.输入 // --files 路径是相对于运行该命令的项目(目录) browser-sync start --server --files &q ...
- Java快速入门-03-小知识汇总篇(全)
Java快速入门-03-小知识汇总篇(全) 前两篇介绍了JAVA入门的一系小知识,本篇介绍一些比较偏的,说不定什么时候会用到,有用记得 Mark 一下 快键键 常用快捷键(熟记) 快捷键 快捷键作用 ...
- 古老的CSS同高列问题
今日在网页设计时,遇到了希望页面的几列同高需求的实现问题,搜罗了一下google,找到以下文章,感觉不错,翻译过来,同时作为学习加深印象. https://css-tricks.com/fluid-w ...
- C#写入文本文档
using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.T ...
- SQL点点滴滴_公用表表达式(CTE)递归的生成帮助数据
本文的作者辛苦了,版权问题特声明本文出处:http://www.cnblogs.com/wy123/p/5960825.html 工作有时候会需要一些帮助数据,必须需要连续的数字,连续间隔的时间点,连 ...
- DW数据库整理设置
操作管理数据库的数据整理设置如下: 管理-全局数据库设置-数据库整理(database grooming)中,选择一个数据类型进行编辑就可以了.默认是保留7天的数据.具体可以参考如下: http:// ...
- Mysql进阶-day3
多实例介绍: mysql多实例就是一台服务器开启多个不同的服务端口(3306,3307),运行多个MySQL服务进程,这些服务进程通过不同的socket监听不同的服务端口来提供各自的服务端口. 这些m ...
- ZT Android Debuggerd的分析及使用方法
Android Debuggerd的分析及使用方法 分类: 移动开发 android framework 2012-12-28 12:00 983人阅读 评论(0) 收藏 举报 目录(?)[+] An ...
- grep 满足多个关键字 任意关键字 排除多个关键字
① grep -E "word1|word2|word3" file.txt 满足任意条件(word1.word2和word3之一)将匹配. ② grep word1 f ...
- Chapter 2 Secondary Sorting:Detailed Example
2.1 Introduction MapReduce framework sorts input to reducers by key, but values of reducers are arbi ...