极客观点
项目管理
HarmonyOS
目前第一次点击切换class已经完成，不知道下面怎么写了，求大神帮帮忙
<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>
html5
直接上代码
刚发错了,把状态改回来就行了
不会啊，估计你哪里弄错了，如图所示
