Vue通過(guò)for循環(huán)隨機(jī)生成不同的顏色或隨機(jī)數(shù)的實(shí)例
更新時(shí)間：2019年11月09日 10:11:23 作者：ProgrammarQin
今天小編就為大家分享一篇Vue通過(guò)for循環(huán)隨機(jī)生成不同的顏色或隨機(jī)數(shù)的實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
需求：隨機(jī)生成不同的如下圖標(biāo)的背景顏色
方法：本來(lái)通過(guò)計(jì)算屬性渲染出隨機(jī)顏色，然而計(jì)算屬性是一次性獲取值，即使你把RandomColor引入v-for中也沒(méi)有用，得到的只會(huì)永遠(yuǎn)是同一顏色，除非刷新頁(yè)面顏色才改變，但是還是沒(méi)法實(shí)現(xiàn)五顏六色的功能，因此，換了中思路，直接在v-for循環(huán)中加入隨機(jī)生成顏色代碼，即可快速得到不同顏色的方塊。
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+ ")";
}
},
最終代碼如下：(此處通過(guò)canview判斷一下用戶是否可以看到方塊，：style=""里面通過(guò)三目運(yùn)算符進(jìn)行判斷后臺(tái)是否有返回顏色值，沒(méi)有則用隨機(jī)顏色填充，有則填充入#ccc默認(rèn)顏色)
<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通過(guò)for循環(huán)隨機(jī)生成不同的顏色或隨機(jī)數(shù)的實(shí)例就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
您可能感興趣的文章:
- 簡(jiǎn)單實(shí)現(xiàn)vue驗(yàn)證碼60秒倒計(jì)時(shí)功能
- Vue驗(yàn)證碼60秒倒計(jì)時(shí)功能簡(jiǎn)單實(shí)例代碼
- 基于vue實(shí)現(xiàn)圖片驗(yàn)證碼倒計(jì)時(shí)60s功能
- Vue實(shí)現(xiàn)手機(jī)號(hào)、驗(yàn)證碼登錄（60s禁用倒計(jì)時(shí)）
- vue組件封裝實(shí)現(xiàn)抽獎(jiǎng)隨機(jī)數(shù)
- vue中如何使用唯一標(biāo)識(shí)uuid(uuid.v1()-時(shí)間戳、uuid.v4()-隨機(jī)數(shù))
- Vue3+Hooks實(shí)現(xiàn)4位隨機(jī)數(shù)和60秒倒計(jì)時(shí)的示例代碼
相關(guān)文章
vue3中如何使用ref和reactive定義和修改響應(yīng)式數(shù)據(jù)(最新推薦)
這篇文章主要介紹了vue3中如何使用ref和reactive定義和修改響應(yīng)式數(shù)據(jù),這里就是vue3中setup組合式api中如何定義響應(yīng)式數(shù)據(jù)并且修改賦值全部?jī)?nèi)容，需要的朋友可以參考下2022-12-12
本文通過(guò)實(shí)例代碼給大家介紹了vue 瑩石攝像頭直播視頻功能，文章還給大家提到了vue h5項(xiàng)目調(diào)用手機(jī)攝像頭錄像并上傳的功能，需要的朋友可以參考下2018-08-08
這篇文章主要介紹了vue.js動(dòng)態(tài)組件和插槽的使用匯總，文章圍繞主題展開(kāi)詳細(xì)的內(nèi)容介紹，具有一定的參考價(jià)值，需要的小伙伴可以參考一下2022-05-05
這篇文章主要介紹了解決vue前后端端口不一致的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2021-07-07
這篇文章主要介紹了微信小程序使用uni-app一鍵獲取用戶信息,需要的朋友可以參考下2023-01-01
在vue3版本中，引入了一個(gè)新的函數(shù)，叫做setup。這篇文章將為大家詳細(xì)介紹一下Vue3中setup方法的用法，感興趣小伙伴的可以了解一下2022-07-07
使用VueCli3+TypeScript+Vuex一步步構(gòu)建todoList的方法
這篇文章主要介紹了使用VueCli3+TypeScript+Vuex一步步構(gòu)建todoList的方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-07-07
Vue.extend 登錄注冊(cè)模態(tài)框的實(shí)現(xiàn)
這篇文章主要介紹了Vue.extend 登錄注冊(cè)模態(tài)框的實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-12-12
詳解elementui之el-image-viewer(圖片查看器)
這篇文章主要介紹了詳解elementui之el-image-viewer(圖片查看器)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-08-08
Vue select 綁定動(dòng)態(tài)變量的實(shí)例講解
這篇文章主要介紹了Vue select 綁定動(dòng)態(tài)變量的實(shí)例講解，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-10-10