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


Posted in Javascript onNovember 09, 2019

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

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循环随机生成不同的颜色或随机数的实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
改变javascript函数内部this指针指向的三种方法
Apr 23 Javascript
jquery select动态加载选择(兼容各种浏览器)
Feb 01 Javascript
基于Jquery+Ajax+Json实现分页显示附效果图
Jul 30 Javascript
JS逆序遍历实现代码
Dec 02 Javascript
jQuery原生的动画效果
Jul 10 Javascript
Bootstrap自动适应PC、平板、手机的Bootstrap栅格系统
May 27 Javascript
javascirpt实现2个iframe之间传值的方法
Jun 30 Javascript
JS去除字符串中空格的方法
Feb 14 Javascript
vue 中基于html5 drag drap的拖放效果案例分析
Nov 01 Javascript
vue回到顶部监听滚动事件详解
Aug 02 Javascript
vue 获取及修改store.js里的公共变量实例
Nov 06 Javascript
vue中解决拖拽改变存在iframe的div大小时卡顿问题
Jul 22 Javascript
vue 根据选择条件显示指定参数的例子
Nov 09 #Javascript
在vue中动态添加class类进行显示隐藏实例
Nov 09 #Javascript
vue-resource:jsonp请求百度搜索的接口示例
Nov 09 #Javascript
解决vue 子组件修改父组件传来的props值报错问题
Nov 09 #Javascript
解决vue组件中click事件失效的问题
Nov 09 #Javascript
浅谈vue中组件绑定事件时是否加.native
Nov 09 #Javascript
Vue根据条件添加click事件的方式
Nov 09 #Javascript
You might like
Apache环境下PHP利用HTTP缓存协议原理解析及应用分析
2010/02/16 PHP
深入PHP获取随机数字和字母的方法详解
2013/06/06 PHP
PHP实现简单数字分页效果
2015/07/26 PHP
php base64 编码与解码实例代码
2017/03/21 PHP
30分钟就入门的正则表达式基础教程
2013/02/25 Javascript
浅谈Javascript中匀速运动的停止条件
2014/12/19 Javascript
js+HTML5基于过滤器从摄像头中捕获视频的方法
2015/06/16 Javascript
JS实现获取键盘按下的按键并显示在页面上的方法
2015/11/04 Javascript
javascript显示上周、上个月日期的处理方法
2016/02/03 Javascript
原生javascript实现图片无缝滚动效果
2016/02/12 Javascript
JS功能代码集锦
2016/05/04 Javascript
Angular4实现鼠标悬停3d倾斜效果
2017/10/25 Javascript
Jquery动态列功能完整实例
2019/08/30 jQuery
javascript实现计算器功能
2020/03/30 Javascript
Python 抓取动态网页内容方案详解
2014/12/25 Python
浅谈机器学习需要的了解的十大算法
2017/12/15 Python
python3实现爬取淘宝美食代码分享
2018/09/23 Python
强悍的Python读取大文件的解决方案
2019/02/16 Python
python 命令行传入参数实现解析
2019/08/30 Python
如何运行带参数的python脚本
2019/11/15 Python
基于Python获取城市近7天天气预报
2019/11/26 Python
使用 Python 清理收藏夹里已失效的网站
2019/12/03 Python
Python计算机视觉里的IOU计算实例
2020/01/17 Python
Python 带星号(* 或 **)的函数参数详解
2021/02/23 Python
使用HTML5加载音频和视频的实现代码
2020/11/30 HTML / CSS
东南亚排名第一的服务市场:kaodim
2019/03/28 全球购物
师范大学音乐表演专业求职信
2013/10/23 职场文书
先进集体事迹材料
2014/02/17 职场文书
调查研究项目计划书
2014/04/29 职场文书
员工合理化建议书
2014/05/19 职场文书
关于建议书的格式范文
2014/05/20 职场文书
团结演讲稿范文
2014/05/23 职场文书
党的群众路线教育实践活动宣传标语口号
2014/06/06 职场文书
2014年小学德育工作总结
2014/12/05 职场文书
班主任远程培训研修日志
2015/11/13 职场文书
Python利用机器学习算法实现垃圾邮件的识别
2021/06/28 Python