Vue通過for循環(huán)隨機(jī)生成不同的顏色或隨機(jī)數(shù)的實(shí)例

更新時間：2019年11月09日 10:11:23 作者：ProgrammarQin

今天小編就為大家分享一篇Vue通過for循環(huán)隨機(jī)生成不同的顏色或隨機(jī)數(shù)的實(shí)例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧

需求：隨機(jī)生成不同的如下圖標(biāo)的背景顏色

方法：本來通過計(jì)算屬性渲染出隨機(jī)顏色，然而計(jì)算屬性是一次性獲取值，即使你把RandomColor引入v-for中也沒有用，得到的只會永遠(yuǎn)是同一顏色，除非刷新頁面顏色才改變，但是還是沒法實(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+ ")";
  }
 },

最終代碼如下：(此處通過canview判斷一下用戶是否可以看到方塊，：style=""里面通過三目運(yùn)算符進(jìn)行判斷后臺是否有返回顏色值，沒有則用隨機(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通過for循環(huán)隨機(jī)生成不同的顏色或隨機(jī)數(shù)的實(shí)例就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

vue3使用vue-router的完整步驟記錄
Vue Router是Vue.js (opens new window)官方的路由管理器,它和 Vue.js 的核心深度集成,讓構(gòu)建單頁面應(yīng)用變得易如反掌,這篇文章主要給大家介紹了關(guān)于vue3使用vue-router的相關(guān)資料,需要的朋友可以參考下
2021-06-06
Vue中的v-for指令不起效果的解決方法
今天小編就為大家分享一篇Vue中的v-for指令不起效果的解決方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2018-09-09
vue-router路由傳參的兩種方式詳解(params和query)
vue-router 是一個基于vue.js的路由器,它提供了強(qiáng)大的路由功能,能夠幫助開發(fā)者快速構(gòu)建單頁應(yīng)用程序,本文將詳細(xì)介紹 vue-router 路由傳參的方法,包括路由傳參的概念、路由傳參的方法、路由傳參的應(yīng)用場景等,需要的朋友可以參考下
2024-12-12
vue2.0 axios前后端數(shù)據(jù)處理實(shí)例代碼
本篇文章主要介紹了vue2.0 axios前后端數(shù)據(jù)處理實(shí)例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-06-06
vue的安裝及element組件的安裝方法
下面小編就為大家分享一篇vue的安裝及element組件的安裝，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2018-03-03
vue+node 實(shí)現(xiàn)視頻在線播放的實(shí)例代碼
這篇文章主要介紹了vue+node 實(shí)現(xiàn)視頻在線播放的實(shí)例代碼,代碼簡單易懂，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下
2020-10-10
vue+elementUI(el-upload)圖片壓縮,默認(rèn)同比例壓縮操作
這篇文章主要介紹了vue+elementUI(el-upload)圖片壓縮,默認(rèn)同比例壓縮操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2020-08-08
淺談Vue3 Composition API如何替換Vue Mixins
這篇文章主要介紹了淺談Vue3 Composition API如何替換Vue Mixins，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2020-04-04
el-select單選時選擇后輸入框的is-focus狀態(tài)并沒有取消問題解決
這篇文章主要給大家介紹了關(guān)于el-select單選時選擇后輸入框的is-focus狀態(tài)并沒有取消問題的解決過程,文中通過圖文以及代碼示例將解決的辦法介紹的非常詳細(xì),需要的朋友可以參考下
2024-01-01
Bootstrap+Vue滑動監(jiān)聽Scrollspy實(shí)現(xiàn)餐廳餐品展示
本文主要介紹了Bootstrap+Vue滑動監(jiān)聽Scrollspy實(shí)現(xiàn)餐廳餐品展示，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2023-03-03