溫馨提示×
您好，登錄后才能下訂單哦！
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
這篇文章給大家分享的是有關(guān)Vue如何通過(guò)for循環(huán)隨機(jī)生成不同的顏色或隨機(jī)數(shù)的內(nèi)容。小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考，一起跟隨小編過(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判斷一下用戶是否可以看到方塊，：里面通過(guò)三目運(yùn)算符進(jìn)行判斷后臺(tái)是否有返回顏色值，沒(méi)有則用隨機(jī)顏色填充，有則填充入#ccc默認(rèn)顏色)
<div : v-for="(val,index) in item" @click="handleMemberClick(val,index,$event)"> </div>
感謝各位的閱讀！關(guān)于“Vue如何通過(guò)for循環(huán)隨機(jī)生成不同的顏色或隨機(jī)數(shù)”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，讓大家可以學(xué)到更多知識(shí)，如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號(hào)
手機(jī)網(wǎng)站二維碼