<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<div id="app">
<div class="button" v-for="(item, index) in list" :class="{ active: visible == index}" @click="clickToIndex(index)">
{{ item.label }}
</div>
</div>
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el: '#app',
data: {
list: [
{
label: '你'
},
{
label: '我'
},
{
label: '他'
}
],
visible: ''
},
methods: {
clickToIndex (index) {
this.visible = index
}
}
})
</script>
</body>
<style>
.button{
display: inline-block;
margin-left: 2px;
width: 2rem;
height: 0.7rem;
font-size: 12px;
color: #7a82e8;
line-height: 0.7rem;
text-align: center;
border-radius: 0.7rem;
border: 1px solid #7a82e8;
margin-top: 0.2rem;
margin-right: 0.2rem;
}
.active {
background-color: red
}
</style>
</html>
