Vue实现随机图片的显示

已于 2023-04-25 22:43:12 修改
阅读量752 收藏 8
点赞数 2
文章标签： vue.js 前端 javascript
于 2023-04-22 10:18:35 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_71469120/article/details/130301136
版权

以下是实现随机图片显示的一个简单案例

HTML

将pic和src属性绑定

 vue配置数据

将要随机显示的图片配置在一个数组中

 生命周期函数Created

created和mounted一样都是生命周期函数

两者区别:

created:在模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图。

mounted:在模板渲染成html后调用，通常是初始化页面完成后，再对html的dom节点进行一些需要的操作。

在生命周期函数created中,我们先通过math.random()*5获取0-5之间的随机数,通过math.round进行取整.这样我们就获取到了0-5这6个整数.这时我们应该将想到了,这6个数对应了路径数组的个数据的下标.我们将获取到的随机数赋值给index.再将路径数组对应下标的值赋给pic,这样我们就完成了图片随机抽取的功能了.

卷小白
关注
  • 2
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
JavaScript随机图片显示
07-27
NULL 博文链接：https://shanshandaocao-163-com.iteye.com/blog/752765
Vue项目中使用Multiavatarjs生成自定义随机头像-demo
JackieDYH的博客
10-23 1419
前者使用简单一点提供的有api，后者更类似一个项目主要使用Multiavatar去实现随机生成头像的功能使用很简单，把js下载保存到项目中，然后在html文件引入，即可全局使用。
vue3 动态获取图片地址
最新发布
sj18838107211的博客
04-09 237
vue3 动态获取图片地址
随机位置显示图片不重叠前端实现详细讲解附效果图，代码可直接使用
a_靖的博客
12-18 6223
先看看效果图所要实现的功能看看代码js代码讲解：下面看看完整代码吧 所要实现的功能 在页面上随机的位置显示随机大小的图片，并且每个图片不能重叠，完整实现代码。 看看代码 注：该代码是在微信小程序写的demo，因为没有使用框架的API，所以该代码的逻辑在h5或者小程序，任何地方都适用。 js代码讲解： list（初始化的数组） 和 arr（在初始化的基础上加上了随机定位的数据和随机的宽高） 是界面要遍历的数组，决定图片渲染数量，这个值也可以改成从后端获取。 最终的数据格式 max 是图片最大值，min
Vue组件：Carvas生成随机图片验证码【纯数字、混英文数字等任意组合都可以】
Blues_han的博客
01-11 365
Carvas、图片验证码
【案例分享】使用servlet和vue展示一个文件夹下的所有图片以及写出点击可以翻转，再次点击还原的效果
m0_73575951的博客
07-13 181
首先编写六个牌面，然后制定旋转动画，使旋转背面放入图片路径（路径需要在servlet中随机获取），在Vue代码区定义一个数组，在六个牌面设置点击事件，每点击一下对于的数组加一，然后用余数来规定牌面的正反。在六个不同颜色的牌面上放置在一个文件夹下随机选取的六张照片，放在前端页面上，点击可以翻转过来，再次点击翻转回去，在不刷新网页的前提下，牌面后的图片是不会变化的，刷新页面则会重新在特定文件夹下随机选取六张放置在牌面下。点击查看全部图片可以看到文件夹下的所有图片以及图片的名称，使用servlet和Vue完成。
Vue显示图片的几种方式
热门推荐
见证自己学习,成长的记录
02-05 2万+
最近在做自己的项目，有这么一个需求，用户列表需要展示用户的头像，之前一直没有处理，趁着这次机会，正好分享下我的解决过程。头像这一栏空荡荡的，我这种强迫症患者难受死！首先声明下，我的数据列表是查询数据库接口返回的，那么我头像路径也是保存在数据库的：我先去网上随便搜了点图片入库里面，先让他能正常展示着，后面有空了再改为通过接口动态上传展示。
vue实现背景图随机
weixin_44500533的博客
10-26 1718
backgroundImage背景图片样式 1，写一个图片数组的js文件 // 背景图片随机生成 import bg1 from './1.jpg' import bg2 from './2.jpg' import bg3 from './3.jpg' import bg4 from './4.jpg' import bg5 from './5.jpg' import bg6 from './6....
vue随机头像与昵称
lss0555的博客
01-18 2507
一、随机头像 1.组件 identicon.js（哈希头像生成器） Identicon 在很多地方都可以看到，比如Github,Stackoveflow … 当给定相同的哈希值时，它将产生与GitHub相同的形状和（几乎）相同的颜色。支持PNG和SVG输出格式。 GitHub地址：https://github.com/stewartlord/identicon.js 2.使用 npm install identicon.js --save 通过提供哈希字符串和大小来生成Identicon。 // cr
vue 实现随机背景图
ikEason_的博客
08-11 949
vue 实现随机背景图
vue中如何显示图片
爬楼梯的前端小白的博客
03-25 6666
<template> <div class="login"> <div class="login_box"> <div class="img"> <img :src="imgUrl" alt="" srcset="" /> </div> </div> </div> </template> <script> import im.
vue实现select下拉显示隐藏功能
10-16
主要介绍了vue实现select下拉显示隐藏功能,本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
Vue实现点击显示不同图片的效果
12-11
本文实例为大家分享了Vue点击显示不同图片的具体代码，供大家参考，具体内容如 使用Vue中的以下知识点来显示效果 ①：v-for：循环遍历数据 ②：v-bind:class={ }：绑定样式 ③：v-on:click（简写@click）：点击事件 ...
VUE实现图片验证码功能
12-30
本文实例为大家分享了VUE实现图片验证码的具体代码，供大家参考，具体内容如下 1. 概述 1.1 说明 在开发过程中，有时候需要使用图片验证码进行增加安全强度，在点击图片时更新新的图片验证码，记录此功能，以便后期...
vue实现的上传图片到数据库并显示到页面功能示例
10-18
主要介绍了vue实现的上传图片到数据库并显示到页面功能,结合实例形式分析了基于vue.js的数据库操作及页面图片显示相关操作技巧,需要的朋友可以参考下
vue实现点击图片放大效果
08-29
主要为大家详细介绍了vue实现点击图片放大效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
vue3生成随机验证码图片插件
Javaigood的博客
03-31 257
Vue3生成随机验证码图片插件
vue 组件 在生成页面时随机显示图片
FormalName1的博客
12-03 1884
template <img :src="a" /> <img :src="b" /> script部分 export default { name: "TitleImage", data(){ return{ //图片路径 url:[ [require("路径1"),require("路径2")], [require("路径3"),require("路径4")], [require("路径5"),require("路径6"
vue轮播图中图片显示顺序
05-24
Vue轮播图中图片的显示顺序一般由数据源决定。你可以在Vue组件中创建一个数组，数组中包含...如果你希望实现随机轮播或者其他方式的轮播顺序，你可以在Vue组件中编写逻辑代码来操作图片数组，从而实现不同的轮播顺序。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

卷小白

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值