Vue通過for循環(huán)隨機生成不同的顏色或隨機數(shù)的實例
更新時間：2019年11月09日 10:11:23 作者：ProgrammarQin
今天小編就為大家分享一篇Vue通過for循環(huán)隨機生成不同的顏色或隨機數(shù)的實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
需求：隨機生成不同的如下圖標的背景顏色
方法：本來通過計算屬性渲染出隨機顏色，然而計算屬性是一次性獲取值，即使你把RandomColor引入v-for中也沒有用，得到的只會永遠是同一顏色，除非刷新頁面顏色才改變，但是還是沒法實現(xiàn)五顏六色的功能，因此，換了中思路，直接在v-for循環(huán)中加入隨機生成顏色代碼，即可快速得到不同顏色的方塊。
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循環(huán)隨機生成不同的顏色或隨機數(shù)的實例就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
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指令不起效果的解決方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
vue-router路由傳參的兩種方式詳解(params和query)
vue-router 是一個基于vue.js的路由器,它提供了強大的路由功能,能夠幫助開發(fā)者快速構(gòu)建單頁應(yīng)用程序,本文將詳細介紹 vue-router 路由傳參的方法,包括路由傳參的概念、路由傳參的方法、路由傳參的應(yīng)用場景等,需要的朋友可以參考下2024-12-12
vue2.0 axios前后端數(shù)據(jù)處理實例代碼
本篇文章主要介紹了vue2.0 axios前后端數(shù)據(jù)處理實例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-06-06
下面小編就為大家分享一篇vue的安裝及element組件的安裝，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03
這篇文章主要介紹了vue+node 實現(xiàn)視頻在線播放的實例代碼,代碼簡單易懂，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-10-10
vue+elementUI(el-upload)圖片壓縮,默認同比例壓縮操作
這篇文章主要介紹了vue+elementUI(el-upload)圖片壓縮,默認同比例壓縮操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08
淺談Vue3 Composition API如何替換Vue Mixins
這篇文章主要介紹了淺談Vue3 Composition API如何替換Vue Mixins，文中通過示例代碼介紹的非常詳細，對大家的學(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)并沒有取消問題的解決過程,文中通過圖文以及代碼示例將解決的辦法介紹的非常詳細,需要的朋友可以參考下2024-01-01
Bootstrap+Vue滑動監(jiān)聽Scrollspy實現(xiàn)餐廳餐品展示
本文主要介紹了Bootstrap+Vue滑動監(jiān)聽Scrollspy實現(xiàn)餐廳餐品展示，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-03-03