vue方法获取 timeline 的每一项,动态改变其中一项的样式
时间: 2024-03-01 09:54:34 浏览: 125
可以通过`ref`获取到`timeline`组件,然后遍历每个`timeline-item`,再通过`class`绑定动态改变样式的类名即可。
示例代码如下:
```vue
<template>
<el-timeline ref="timeline">
<el-timeline-item v-for="(item, index) in timelineData" :key="index">
{{ item }}
<el-button @click="changeStyle(index)">改变样式</el-button>
</el-timeline-item>
</el-timeline>
</template>
<script>
export default {
data() {
return {
timelineData: ["第一项", "第二项", "第三项"]
};
},
methods: {
changeStyle(index) {
// 获取 timeline-item
const timelineItem = this.$refs.timeline.$el.children[index];
// 动态改变样式
timelineItem.classList.toggle("custom-class");
}
}
};
</script>
<style>
.custom-class {
background-color: #f0f0f0;
}
</style>
```
这样,每次点击“改变样式”按钮,对应的`timeline-item`都会动态改变样式。
阅读全文
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20241231044930.png)
![zip](https://img-home.csdnimg.cn/images/20241231045053.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![zip](https://img-home.csdnimg.cn/images/20241231045053.png)
![docx](https://img-home.csdnimg.cn/images/20241231044901.png)
![zip](https://img-home.csdnimg.cn/images/20241231045053.png)
![-](https://img-home.csdnimg.cn/images/20241226111658.png)
![-](https://img-home.csdnimg.cn/images/20241226111658.png)
![-](https://img-home.csdnimg.cn/images/20241226111658.png)
![-](https://img-home.csdnimg.cn/images/20241226111658.png)
![-](https://img-home.csdnimg.cn/images/20241226111658.png)
![-](https://img-home.csdnimg.cn/images/20241226111658.png)
![-](https://img-home.csdnimg.cn/images/20241226111658.png)
![-](https://img-home.csdnimg.cn/images/20241226111658.png)
![-](https://img-home.csdnimg.cn/images/20241226111658.png)
![-](https://img-home.csdnimg.cn/images/20241226111658.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)