首页二、v-bind样式增强练习：点击哪个tab页签时，哪个tab页签高亮要求： 1.基于数据，动态渲染tab（v-for） 2.准备一个下标记录高亮的是哪一个 tab 3.基于下标动态切换class的类名

二、v-bind样式增强练习：点击哪个tab页签时，哪个tab页签高亮要求： 1.基于数据，动态渲染tab（v-for） 2.准备一个下标记录高亮的是哪一个 tab 3.基于下标动态切换class的类名

时间: 2024-12-23 12:16:20 浏览: 44

在Vue.js中，你可以使用v-bind指令结合v-model和v-for来实现这个功能。首先，你需要设置一个数组来存储每个tab的信息，并维护一个当前选中的索引。下面是一个基本的步骤： 1. 数据结构设置： ```javascript data() { return { tabs: [ { name: 'Tab 1', active: false }, { name: 'Tab 2', active: false }, { name: 'Tab 3', active: false } ], activeIndex: 0 }; } ``` 2. 使用v-for渲染tab标签： ```html <ul> <li v-for="(tab, index) in tabs" :key="index" @click="setActiveTab(index)"> <span :class="{ 'active': tab.active }">{{ tab.name }}</span> </li> </ul> ``` `:class="{ 'active': tab.active }"` 这部分会根据 `tab.active` 的值动态添加或移除 "active" 类。 3. 设置点击事件 `setActiveTab`： ```javascript methods: { setActiveTab(index) { this.tabs.forEach(tab => (tab.active = false)); // 清除所有tab的高亮状态 this.activeIndex = index; // 更新当前选中的索引 this.tabs[index].active = true; // 仅激活点击的那个tab } } ``` 当用户点击某个tab时，会触发`setActiveTab`方法，将对应的 `tab.active` 设为true，同时更新`activeIndex`。

阅读全文