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);
        }