vue循环el-button,默认第一个按钮高亮,点击哪个按钮那个按钮高亮
时间: 2024-03-07 20:50:39 浏览: 33
可以在循环渲染 el-button 的时候,添加一个变量来判断当前按钮是否被选中,然后通过 v-bind:class 来动态绑定样式。
具体实现方式如下:
1. 在 data 中添加一个变量,用来记录当前被选中的按钮的索引值:
```
data() {
return {
activeButtonIndex: 0,
buttons: ['按钮1', '按钮2', '按钮3']
}
}
```
2. 在循环渲染 el-button 的时候,通过 v-for 循环遍历 buttons 数组,并通过 v-bind:class 来动态绑定样式:
```
<el-button
v-for="(button, index) in buttons"
:key="index"
:class="{ 'is-active': activeButtonIndex === index }"
@click="activeButtonIndex = index"
>
{{ button }}
</el-button>
```
3. 在样式中定义 .is-active 类的样式,用来表示当前被选中的按钮:
```
.is-active {
background-color: #409EFF;
color: #fff;
}
```
这样就可以实现循环渲染 el-button,默认第一个按钮高亮,点击哪个按钮那个按钮高亮的效果。
相关问题
vue 循环4个el-button,默认选中第一个按钮,当选择其他按钮时,当前选中按钮高亮
好的,这个问题需要用到 Vue 的数据绑定和条件渲染。
首先,我们可以在 data 中定义一个变量 `selectedButtonIndex` 来表示当前选中的按钮的索引,默认值为 0,也就是第一个按钮。然后,我们在模板中使用 v-for 来循环渲染四个 el-button,同时根据 `selectedButtonIndex` 的值来设置当前选中按钮的样式。
代码如下:
```html
<template>
<div>
<el-button
v-for="(button, index) in buttons"
:key="index"
:class="{ 'is-active': selectedButtonIndex === index }"
@click="selectedButtonIndex = index"
>
{{ button }}
</el-button>
</div>
</template>
<script>
export default {
data() {
return {
buttons: ['Button 1', 'Button 2', 'Button 3', 'Button 4'],
selectedButtonIndex: 0,
};
},
};
</script>
<style>
.is-active {
background-color: #409eff;
color: #fff;
}
</style>
```
在上面的代码中,我们使用了 Vue 的数据绑定和条件渲染来实现了题目中的需求。当用户点击不同的按钮时,`selectedButtonIndex` 的值会相应地改变,从而触发样式的变化。同时,我们使用了 CSS 来设置选中按钮的样式,使其高亮显示。
vue3 el-button点击高亮显示再次点击变暗
你可以借助 Vue3 的指令来实现这个效果。具体实现步骤如下:
1. 创建一个自定义指令 v-click-highlight,用于设置点击高亮效果。
```
// v-click-highlight.js
const clickHighlight = {
mounted(el) {
el.addEventListener('click', () => {
el.style.backgroundColor = '#f2f2f2';
setTimeout(() => {
el.style.backgroundColor = '';
}, 100);
});
},
};
export default clickHighlight;
```
2. 在组件中使用该指令,并为 el-button 组件添加 v-click-highlight 指令。
```
<template>
<div>
<el-button v-click-highlight>点击我</el-button>
</div>
</template>
<script>
import clickHighlight from './v-click-highlight';
export default {
directives: {
clickHighlight,
},
};
</script>
```
这样,当你点击按钮时,背景会短暂地变成灰色,然后恢复原来的颜色。这就是点击高亮的效果,再次点击按钮时,背景色会立即变回原来的颜色,实现了点击变暗的效果。