Vue通过for循环随机生成不同的颜色或随机数的实例

需求：随机生成不同的如下图标的背景颜色

方法：本来通过计算属性渲染出随机颜色，然而计算属性是一次性获取值，即使你把RandomColor引入v-for中也没有用，得到的只会永远是同一颜色，除非刷新页面颜色才改变，但是还是没法实现五颜六色的功能，因此，换了中思路，直接在v-for循环中加入随机生成颜色代码，即可快速得到不同颜色的方块。

 computed: {
  RandomColor(index) {
  let r, g, b;
  r = Math.floor(Math.random() * 256);
  g = Math.floor(Math.random() * 256);
  b = Math.floor(Math.random() * 256);
  return "rgb(" +r + ',' +g+ ',' +b+ ")";
  }
 },

最终代码如下：(此处通过canview判断一下用户是否可以看到方块，：style=""里面通过三目运算符进行判断后台是否有返回颜色值，没有则用随机颜色填充，有则填充入#ccc默认颜色)

<div :style="{backgroundColor:val.can=='1'?(val.iconcolor==''||val.iconcolor==null?'rgb('+Math.floor(Math.random() * 256)+','+Math.floor(Math.random() * 256)+','+Math.floor(Math.random() * 256)+')':val.iconcolor):'#ccc'}" v-for="(val,index) in item" @click="handleMemberClick(val,index,$event)">
</div>

以上这篇Vue通过for循环随机生成不同的颜色或随机数的实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • vue的for循环使用方法

    vue是一套当下非常受欢迎的构建用户界面的渐进式框架.那如何使用vue进行数据循环呢?下面的案例将使用v-for循环进行数据的遍历. 1.打开html开发工具,新建一个html 代码页面. 2.在新建的html代码页面创建一个<ul>标签同时给这个标签设置一个id为app,然后在<ul>里创建一个<li>标签. 代码: <ul id="app"> <li></li> </ul> 3.引入vue.js.在

  • vue-for循环嵌套操作示例

    vue-for循环嵌套操作示例

    本文实例讲述了vue-for循环嵌套操作.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{ margin: 0; padding: 0; list-style: none; } </style> &l

  • vue生成随机验证码的示例代码

    vue生成随机验证码的示例代码

    本文介绍了vue生成随机验证码的示例代码,分享给大家,具体如下: 样式自调,最终效果如图: 实现效果: 点击右边input框会自动切换,如果输入的值与字不同,则清空换一串随机数 HTML <input type="text" placeholder="请输入验证码" class="yanzhengma_input" @blur="checkLpicma" v-model="picLyanzhengma"

  • Vue中控制v-for循环次数的实现方法

    在Vue中的遍历方法v-for控制循环次数的方法可以通过以下两种方法 1.截取循环的数据 v-for="(item,index) in domainList.slice(0, 2)" 用这样的方法可以截取循环的数据长度,从而控制循环的次数 2.通过v-if来控制 v-for="(item,index) in domainList" v-if="index<3" 在标签下紧跟v-if来进行控制,这里是用索引来进行控制的,所以循环的时候记得把i

  • 浅谈vue.js中v-for循环渲染

    浅谈vue.js中v-for循环渲染

    这两天学习了Vue.js 感觉v-for循环渲染这个地方知识点挺多的,而且很重要,所以,今天添加一点小笔记. 一.简介 vue.js 的循环渲染是依赖于 v-for 指令,它能够根据 vue 的实例里面的信息,循环遍历所需数据,然后渲染出相应的内容.它可以遍历数组类型以及对象类型的数据,js 里面的数组本身实质上也是对象,这里遍历数组和对象的时候,方式相似但又稍有不同. (一)遍历对象 <div id="app"> <ul> <li v-for="

  • Vue通过for循环随机生成不同的颜色或随机数的实例

    需求:随机生成不同的如下图标的背景颜色 方法:本来通过计算属性渲染出随机颜色,然而计算属性是一次性获取值,即使你把RandomColor引入v-for中也没有用,得到的只会永远是同一颜色,除非刷新页面颜色才改变,但是还是没法实现五颜六色的功能,因此,换了中思路,直接在v-for循环中加入随机生成颜色代码,即可快速得到不同颜色的方块. computed: { RandomColor(index) { let r, g, b; r = Math.floor(Math.random() * 256);

  • js随机生成网页背景颜色的方法

    本文实例讲述了js随机生成网页背景颜色的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <HTML> <HEAD> <TITLE>随机生成网页背景颜色的JS特效</TITLE> <STYLE> .30pt{font-size:30pt;color:#de3076} </STYLE> <SCRIPT LANGUAGE="JavaScript"> <!-- color=new A

  • python随机生成大小写字母数字混合密码(仅20行代码)

    用简单的方法生成随机性较大的密码 仅用20行代码随机生成密码 核心思路:利用random模块 random模块随机生成数字,大小写字母,循环次数 while循环+随机生成的循环次数-->随机plus++ 大写字母ASKII码在65-90之间 小写字母Askll码在97-122之间 最终效果: x个大写字母+y个数字+z个小写字母(x,y,z均随机) 随机性相较于以往单调的 小写+数字+大写+小写+数字+大写- 循环有所提升 import random print(＂随机数生成") time

  • Python如何生成指定区间中的随机数

    目录 如何生成指定区间中的随机数 1. random() 2. rand() 3. randint() python生成随机数总结 生成随机数和随机数操作 Python自带random numpy库的random 如何生成指定区间中的随机数 要求生成区间[a, b]中的随机数.若要求为浮点数,则Python中只能近似达到这一要求,因为随机函数的取值区间一般都为左闭右开区间,因为只能无限接近b. 若要求为整数,那么将取数区间设置为[a,b+1)即可以取到b了. 具体如下: 1. random()

  • 随机生成10个不重复的0-100的数字(实例讲解)

    在面试时,面试官问了我一道js题:随机生成一个含有10个元素的数组,且元素为0-100的不重复的整数.当时的第一反应是for循环生成10个数字,但是可能会有重复的情况:进一步思考,需要对生成的数字进行验证才能放到数组里面,但是问题来了,如果恰好有重复的,那我之前for循环生成的10个数字就不够了.当时回答的不好,回来后再仔细思考一下,想出了2中解决方案,第一种其实是尝试过程中得出的,还是第二种比较好. 第一种: function random () { var arr = []; for (va

  • Python随机生成带特殊字符的密码

    在日常运维中,如果涉及到用户管理,就一定会用到给用户设置密码的工作,其实吧,平时脑子里觉得设置个密码没什么,但要真让你随手敲一个12位带特殊字符的随机密码,也是很痛苦的事,如果让你敲10个这样的随机密码,我估计要人要疯了,所以这事不适合人干,但机器最做这个最拿手,今天我们就来学习一段python脚本,可以直接生成自己需要的密码,且密码长度,数字,字符个数随意你指定,废话不多说了,我们直接看代码: #!/usr/bin/env python import string from itertools

  • .net 随机生成汉字

    在没讲.net如何随机生成汉字之前先给大家讲下汉字编码组成及原理. 1.汉字编码原理 到底怎么办到随机生成汉字的呢?汉字从哪里来的呢?是不是有个后台数据表,其中存放了所需要的所有汉字,使用程序 随机取出几个汉字组合就行了呢?使用后台数据库先将所有汉字存起来使用时随机取 出,这也是一种办法,但是中文汉字有这么多,怎么来制作呢?其实可以不使用任何后台数据库,使用程序就能做到这一切. 要知道如何生成汉字,就得先了解中文汉字的编码原理. 1980年,为了使每一个汉字有一个全国统一的代码,我国颁布了第一个

  • C++控制台实现随机生成路径迷宫游戏

    本程序是在控制台下随机生成迷宫路径的一个C++程序,可以通过修改宏定义 M 和 N 的值来修改迷宫的长度和宽度,运行程序后 按1开始游戏 按2退出游戏,游戏入口在左上角,出口在右下角,人物(星星)到达右下角出口提示成功闯关. #include<stdio.h> #include<stdlib.h> #include<string.h> #include<conio.h> #include<iostream.h> #include<ctime

  • 基于JS实现一个随机生成验证码功能

    效果展示 实现原理 1. html:一般就是一个div: <div id="code"></div> ,样式根据需求设计. 2. JS:1)将所有的验证码所用的字符放在一个字符串中 2)在这个字符串的字符个数以内,随机生成索引号 3)根据索引号查找对应字符,拼接成验证码的字符串 代码实现 HTML: <div id="code"></div> CSS: * { margin: 0; padding: 0; } div

  • Vue 动态添加路由及生成菜单的方法示例

    写后台管理系统,估计有不少人遇过这样的需求:根据后台数据动态添加路由和菜单. 为什么这么做呢?因为不同的用户有不同的权限,能访问的页面是不一样的. 在网上找了好多资料,终于想到了解决办法. 动态生成路由 利用 vue-router 的 addRoutes 方法可以动态添加路由. 先看一下官方介绍: router.addRoutes router.addRoutes(routes: Array<RouteConfig>) 动态添加更多的路由规则.参数必须是一个符合 routes 选项要求的数组.

随机推荐