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

目前第一次点击切换class已经完成,不知道下面怎么写了,求大神帮帮忙
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">已经录制{{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>
阅读 2.8k
2 个回答

直接上代码

刚发错了,把状态改回来就行了

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

不会啊,估计你哪里弄错了,如图所示
图片描述

用v-show控制显示隐藏啊

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题