topic description
how to change the style of the button after clicking the button in vue? Change the style of the button directly after clicking the button
sources of topics and their own ideas
write two styles, before and after clicking, to bind and change after clicking
related codes
/ / Please paste the code text below (do not replace the code with pictures)
<!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}}<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: "-sharpcontent",
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>
what result do you expect? What is the error message actually seen?
similar to the check-in on the peanut subway APP on the mobile phone, click to change the style of the button, this button can not be clicked. It"s the same in the back. You can only check in once a day
< H2 > only the code of the foreground is needed, and the database in the background is not needed < / H2 > the above still lacks three functions:
1, after the first one is checked in, the second one is checked in again, and the style of the first one returns to the unchecked state again;
2, it can not be continuous check-in, after the first check-in, you can check-in at will, not just the last one;
3, refresh the check-in after all seven days of check-in, and start from the first check-in again.
Thank you