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 相关文章推荐
Js切换功能的简单方法
Nov 23 Javascript
Javascript实现带关闭按钮的网页漂浮广告代码
Jan 12 Javascript
jQuery实现textarea自动增长宽高的方法
Dec 18 Javascript
限制文本框只能输入数字||只能是数字和小数点||只能是整数和浮点数
May 27 Javascript
浅谈js中StringBuffer类的实现方法及使用
Sep 02 Javascript
微信小程序开发之圆形菜单 仿建行圆形菜单实例
Dec 12 Javascript
Angular 通过注入 $location 获取与修改当前页面URL的实例
May 31 Javascript
Vue2.0 http请求以及loading展示实例
Mar 06 Javascript
webpack 模块热替换原理
Apr 09 Javascript
一个Vue页面的内存泄露分析详解
Jun 25 Javascript
微信小程序实现滑动切换自定义页码的方法分析
Dec 29 Javascript
详解如何给React-Router添加路由页面切换时的过渡动画
Apr 25 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
php实现简单洗牌算法
2013/06/18 PHP
PHP判断指定时间段的2个方法
2014/03/14 PHP
PHPExcel中文帮助手册|PHPExcel使用方法(分享)
2017/06/09 PHP
PHP实现的redis主从数据库状态检测功能示例
2017/07/20 PHP
php安装扩展mysqli的实现步骤及报错解决办法
2017/09/23 PHP
建立良好体验度的Web注册系统ajax
2007/07/09 Javascript
JavaScript 对象、函数和继承
2009/07/07 Javascript
DIY jquery plugin - tabs标签切换实现代码
2010/12/11 Javascript
js中点击空白区域时文本框与隐藏层的显示与影藏问题
2013/08/26 Javascript
JavaScript中的Primitive对象封装介绍
2014/12/31 Javascript
JS实现仿雅虎首页快捷登录入口及导航模块效果
2015/09/19 Javascript
JavaScript实现cookie的写入、读取、删除功能
2015/11/05 Javascript
JQuery标签页效果实例详解
2015/12/24 Javascript
jquery对Json的各种遍历方法总结(必看篇)
2016/09/29 Javascript
微信小程序 扎金花简单实例
2017/02/21 Javascript
详解使用webpack+electron+reactJs开发windows桌面应用
2019/02/01 Javascript
微信小程序实现蒙版弹出窗功能
2019/09/17 Javascript
解决vue的router组件component在import时不能使用变量问题
2020/07/26 Javascript
在Python的web框架中配置app的教程
2015/04/30 Python
Python实现自动添加脚本头信息的示例代码
2016/09/02 Python
Python对象转换为json的方法步骤
2019/04/25 Python
python3+PyQt5 自定义窗口部件--使用窗口部件样式表的方法
2019/06/26 Python
python 实现Flask中返回图片流给前端展示
2020/01/09 Python
北美三大旅游网站之一:Travelocity
2017/08/12 全球购物
HomeAway的巴西品牌:Alugue Temporada
2018/04/10 全球购物
万宝龙英国官网:Montblanc手表、书写工具、皮革和珠宝
2018/10/16 全球购物
印尼极简主义和实惠的在线家具店:Fabelio
2019/03/27 全球购物
优秀幼教自荐信
2014/02/03 职场文书
2014年团员学习十八大思想汇报
2014/09/13 职场文书
依法行政工作汇报
2014/10/28 职场文书
高中生打架检讨书1000字
2015/02/17 职场文书
2015年化验员工作总结
2015/04/10 职场文书
我爱我班主题班会
2015/08/13 职场文书
庆祝教师节主题班会
2015/08/17 职场文书
《给予树》教学反思
2016/03/03 职场文书
OpenFeign实现远程调用
2022/08/14 Java/Android