vue中让一个div中的button,从同一行开始依次排列,指定一行放三个,如果放不下了放到下一行,如果点击按钮,按钮会长亮,不点击,按钮是里面整个是灰色的,再次点击恢复,点击之后重新渲染页面,写个案例
时间: 2023-03-20 10:02:34 浏览: 142
在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>
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)