鍍金池/ 問(wèn)答/HTML5  HTML/ vue.js實(shí)現(xiàn)顯示與隱藏，求助

vue.js實(shí)現(xiàn)顯示與隱藏，求助

目前第一次點(diǎn)擊切換class已經(jīng)完成，不知道下面怎么寫了，求大神幫幫忙
clipboard.png

<style>
        *{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;
        }
    </style>
    <title>switch</title>
</head>
<body>
    <div class="box">
            <p style="position:absolute;left:0;top:0">已經(jīng)錄制{{seconds}}秒</p>
            <li class="record-again">重錄</li>
            <li class="red" @click="record" :class="currentClass"></li>
            <li class="complte">上傳</li>
        
    </div>
    <script src="js/vue.js"></script>
    <script src="js/vue-resource.js"></script>
    <script>
        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)
                }
            }

        })
    </script>
回答
編輯回答
維她命

直接上代碼

剛發(fā)錯(cuò)了,把狀態(tài)改回來(lái)就行了

 again: function() {
            this.start();
            this.isShow = false;
            this.message = "";
            this.isPlaying = false;//這里
        },

不會(huì)啊，估計(jì)你哪里弄錯(cuò)了，如圖所示
圖片描述

2017年10月23日 23:04
編輯回答
九年囚

用v-show控制顯示隱藏啊

2017年10月4日 00:19