vue中让一个div中的button，从同一行开始依次排列，指定一行放三个，如果放不下了放到下一行，如果点击按钮，按钮会长亮，不点击，按钮是里面整个是灰色的，再次点击恢复，点击之后重新渲染页面，写个案例

在Vue中，可以使用flex布局实现：<div class="container">
<div v-for="item in items" :key="item.id" class="item">
<button @click="handleClick(item.id)">{{item.name}}</button>
</div>
</div><style>
.container {
display: flex;
flex-wrap: wrap;
}
.item {
flex: 1 1 33%;
padding: 10px 0;
}
.item button {
background: #ccc;
}
.item button.active {
background: #f00;
}
</style><script>
export default {
data() {
return {
items: [{
id: 1,
name: '按钮1'
}, {
id: 2,
name: '按钮2'
}, {
id: 3,
name: '按钮3'
}, {
id: 4,
name: '按钮4'
}]
}
},
methods: {
handleClick(id) {
const btn = document.querySelector(`#btn-${id}`)
btn.classList.toggle('active')
}
}
}
</script>