vue v-for循環不同樣式/控制顯隱

通過 :style = "函數()" 或者 :class="函數" 可以通過函數加傳參來控制不同列的樣式。

<div class="start" v-for="(list,index) in lists" :key="list.id"  :style.prevent="aa(list.size)" ref="list">
            <div :class="className(list.id)" :style="{fontSize:list.size+'px'}"><div class="left">{{list.content}} </div>
                <div @click="change(index)" v-show="fire!=index" class="right" :class = "list.hot == true ? 'hot' : ''" :style="{width:list.size+'px',height:list.size+'px'}"></div>
                <div class="fire" v-show="fire==index" :style="{width:list.size+'px',height:list.size+'px'}">
                    <div class="flames right">
                        <div class="flame"></div>
                        <div class="flame"></div>
                        <div class="flame"></div>
                        <div class="flame"></div>
                    </div>
                </div>
            </div>
        </div>

通過v-show="fire!=index"和v-show="fire==index" 來控制循環裏面的某一個顯示或隱藏，在data裏面設置fire = -1；然後點擊change事件來改變fire的值。

對應函數代碼如下：

aa(size){
                // let to = parseInt(Math.random()*this.screenHeight);
                // let lef = parseInt(Math.random()*this.screenWidth/10);
                let to = parseInt(Math.random()*size-25);
                let lef = parseInt(Math.random()*size);
                 return{
                   top:to+'px',
                   left:lef+'px',   
                }
                console.log("1"+top);
            }, 
       bg(hot){
               if(hot){
                   return'url(../assets/hot.jpg)'
                }
            },
       className(index){
            let a = parseInt(index%3);
            console.log(a)
            return "con"+a;
        },
        change(index){
            this.fire =index;
            setTimeout(() => {
                this.fire = -1;
            },2000);
        }