极客观点
项目管理
HarmonyOS
题目描述
vue中怎么点击按钮后进行更改按钮的样式？点击按钮后直接更改按钮的样式
题目来源及自己的思路
写两个样式，分别是点击前和点击后的，进行绑定，点击后进行更改
相关代码
// 请把代码文本粘贴到下方（请勿用图片代替代码）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>签到打卡</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!--<script src="../js/vue.min.js"></script>-->
<style>
* {
margin: 0px;
padding: 0px;
}
body {
width: 720px;
margin: 0px auto;
padding-top: 100px;
text-align: center;
}
.Sgin_in_Day {
float: left;
padding: 10px;
margin: 10px;
}
.txt_day {
float: left;
font-size: 18px;
margin: 5px 24.7px 10px 24.7px;
}
/*更改前的样式*/
.btn {
float: left;
height: 70px;
width: 70px;
margin: 3px 13px;
font-weight: bold;
font-size: 18px;
line-height: 70px;
color: white;
border-radius: 100px;
background-color: red;
}
/*更改后的样式*/
.active {
font-size: 20px;
color: gainsboro;
background-color: seagreen;
}
</style>
</head>
<body>
<div id="content">
<div class="Sgin_in_Day">
<!--绑定数据源-->
<p v-for="(item,index) in list" class="txt_day">{{item}}</p><br />
<div v-for="(item,index) in lists" v-bind:class="[idx == index?'active':'']" @click="isActive(index)" class="btn">{{item}}</div>
</div>
</div>
<script>
var app = new Vue({
el: '#content',
data: {
//数据源
list: ['第1天', '第2天', '第3天', '第4天', '第5天', '第6天', '第7天'],
lists: ['1分钱', '1分钱', '1分钱', '1分钱', '1分钱', '1分钱', '1分钱'],
idx: -1
},
methods: {
isActive(index) {
//变换样式
console.log(index)
this.idx = index
}
}
})
</script>
</body>
</html>
你期待的结果是什么？实际看到的错误信息又是什么？
类似于手机上花生地铁APP上的签到，点击后更改按钮的样式，这个按钮就不能被点击了。后面的一样。一天只能签到一次
只需要前台的代码，不需要后台的数据库
上面的还差三个功能：
1、签到第一个后，再次签到第二个，第一个的样式就又回到了未签到的状态；
2、可以不是连续的签到，签到第一个后，可以随意签到，而不是只可以签到后一个的；
3、当七天全部签到过后刷新签到，重新从第一个开始签到。
感谢
每天只能签到一次，这涉及到和用户绑定，那就意味着后台数据库中存在一个类似【签到时间】的字段。
1、进入页面后只需获取用户的数据，根据【签到时间】确定显示什么样式及按钮是否可以点击。
2、如果用户未签到，点击【签到】后需要调用后台【签到】的接口，成功后更新【签到】按钮的状态