vue中怎么点击按钮后进行更改按钮的样式？ - 知否问答 - 万象云+社区

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>签到打卡</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.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>

只需要前台的代码，不需要后台的数据库

上面的还差三个功能：
1、签到第一个后，再次签到第二个，第一个的样式就又回到了未签到的状态；
2、可以不是连续的签到，签到第一个后，可以随意签到，而不是只可以签到后一个的；
3、当七天全部签到过后刷新签到，重新从第一个开始签到。

感谢

回答动态