在vue中,某个类名在html里出现多次,并且这个类名的标签是动态生成的,一开始只有一个,点击一下按钮,添加一个,我想给最后一个设定特殊样式,请问怎么写
时间: 2023-06-02 21:01:51 浏览: 53
可以使用Vue的ref属性来获取动态生成的标签,然后通过CSS伪类选择器:last-child来为最后一个标签设置特殊样式。具体实现如下:
1. 在模板中给动态生成的标签加上ref属性,例如:
```html
<template>
<div>
<div class="item" ref="item" v-for="(item, index) in items" :key="index">{{ item }}</div>
<button @click="addItem">添加</button>
</div>
</template>
```
2. 在样式中使用:last-child伪类选择器为最后一个标签设置特殊样式,例如:
```css
.item:last-child {
color: red;
}
```
3. 在Vue实例中使用$refs获取动态生成的标签,例如:
```js
export default {
data() {
return {
items: ['item1', 'item2'],
}
},
methods: {
addItem() {
this.items.push('item' + (this.items.length + 1));
this.$nextTick(() => {
this.$refs.item[this.items.length - 1].classList.add('last-item');
});
},
},
}
```
4. 在方法中使用$nextTick来保证获取到动态生成的标签后再为最后一个标签添加特殊样式,例如:
```css
.last-item {
color: red;
}
```