$(".index_tab li").eq(indexView.tabIdx || 0).click();用vue实现相同功能
时间: 2023-11-28 17:49:43 浏览: 62
在 Vue 中,你可以使用 `v-bind:class` 和 `v-on:click` 指令来实现相同功能。假设你有一个名为 `tabIndex` 的 data 属性,可以这样实现:
```html
<template>
<div>
<ul class="index_tab">
<li
v-for="(tab, index) in tabs"
:key="index"
:class="{ active: tabIndex === index }"
@click="switchTab(index)"
>
{{ tab }}
</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
tabIndex: 0,
tabs: ["Tab 1", "Tab 2", "Tab 3"]
};
},
methods: {
switchTab(index) {
this.tabIndex = index;
}
}
};
</script>
<style>
.active {
background-color: #ccc;
}
</style>
```
这里通过 `v-bind:class` 绑定了一个类名 `active`,当 `tabIndex` 等于当前循环的索引 `index` 时,该类名会被添加到 `li` 元素上,实现了选中效果。通过 `v-on:click` 绑定了一个 `switchTab` 方法,用于切换当前选中的标签页。
阅读全文