Vue通过for循环随机生成不同的颜色或随机数的实例
更新时间：2019年11月09日 10:11:23 作者：ProgrammarQin
今天小编就为大家分享一篇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循环随机生成不同的颜色或随机数的实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
Vue Router是Vue.js (opens new window)官方的路由管理器,它和 Vue.js 的核心深度集成,让构建单页面应用变得易如反掌,这篇文章主要给大家介绍了关于vue3使用vue-router的相关资料,需要的朋友可以参考下2021-06-06
今天小编就为大家分享一篇Vue中的v-for指令不起效果的解决方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
vue-router路由传参的两种方式详解(params和query)
vue-router 是一个基于vue.js的路由器,它提供了强大的路由功能,能够帮助开发者快速构建单页应用程序,本文将详细介绍 vue-router 路由传参的方法,包括路由传参的概念、路由传参的方法、路由传参的应用场景等,需要的朋友可以参考下2024-12-12
本篇文章主要介绍了vue2.0 axios前后端数据处理实例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-06-06
下面小编就为大家分享一篇vue的安装及element组件的安装，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-03-03
这篇文章主要介绍了vue+node 实现视频在线播放的实例代码,代码简单易懂，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2020-10-10
vue+elementUI(el-upload)图片压缩,默认同比例压缩操作
这篇文章主要介绍了vue+elementUI(el-upload)图片压缩,默认同比例压缩操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-08-08
浅谈Vue3 Composition API如何替换Vue Mixins
这篇文章主要介绍了浅谈Vue3 Composition API如何替换Vue Mixins，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-04-04
el-select单选时选择后输入框的is-focus状态并没有取消问题解决
这篇文章主要给大家介绍了关于el-select单选时选择后输入框的is-focus状态并没有取消问题的解决过程,文中通过图文以及代码示例将解决的办法介绍的非常详细,需要的朋友可以参考下2024-01-01
Bootstrap+Vue滑动监听Scrollspy实现餐厅餐品展示
本文主要介绍了Bootstrap+Vue滑动监听Scrollspy实现餐厅餐品展示，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-03-03
最新评论