按钮样式比没写,根据自己的需求自己修改就行,示例代码如下,拿走即用:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>去掉滚动条</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<style>
.active{
color: red;
}
</style>
</head>
<body>
<div id="app">
<div class="box">
<div v-for="(item,index) in arr" :key="index" @click="tap(index)" :class="activeIndex==index ? 'active' : ''">{{item.name}}</div>
</div>
</div>
</body>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data: {
arr:[
{
name:"按钮A"
},
{
name:"按钮B"
}
],
activeIndex:"-1" //如果想要设置默认选中,activeIndex值和索引值对应即可;例如,activeIndex等于0,默认选中就是按钮A
},
methods:{
tap(index){
this.activeIndex=index;
}
}
})
</script>
<html>