vue 隐藏display_vue.js实现显示与隐藏，求助

目前第一次点击切换class已经完成，不知道下面怎么写了，求大神帮帮忙

*{margin:0;padding:0;}

.box{

width:500px;

margin:0 auto;

height:400px;

display: flex;

align-items: center;

justify-content: space-around;

position: relative;

}

.box li{

width:100px;

height:100px;

border-radius: 50%;

line-height:100px;

text-align:center;

list-style: none

}

.complte{

background: green;

display: none;

}

.record-again{

background: #aaa;

display: none;

}

.red{

background: red

}

.yellow:{

background: yellow

}

.green{

background: green

}

.play{

background: #000;

border:1px solid #fff;

}

switch

已经录制{{seconds}}秒

重录上传

var demo = new Vue({

el:'.box',

data:{

seconds:0,

classes:['red','yellow','green'],

currentClass:"",

index:0,

},

methods:{

record:function() {

var self = this;

setInterval(function() {

if(self.index>self.classes.length) {

self.index = 0

}

self.index++;

self.currentClass = self.classes[self.index];

},500)

}

}

})