Vue3 选项卡组件实现：动态绑定 class 的最佳实践

本文将探讨如何在 Vue3 中实现一个简单的选项卡组件，并重点讲解使用动态绑定 class 的方法。

示例代码：

<div id='leo'>
   <button
       v-for='tab in buttonMsg'
       :key="tab"
       @click="tabName = tab"
       :class='{"active": tabName === tab, "tab-button": true}'
   >
       {{tab}}
   </button>
   <component :is='tabName' id='mmm' kkk="nbn" class="abc"></component>
</div>

var app = Vue.createApp({
   data() {
       return {
           'msg':'hello',
           'buttonMsg':['leo','sky','blue'],
           'tabName':'leo'
       }
   }
});
app.component('leo',{
   'template':`
       <div class='kkk'>leoxxxx</div>
   `
});
app.component('sky',{
   'template':`
       <div>sky</div>
   `
});
app.component('blue',{
   'template':`
       <div>blue</div>
   `
});
app.mount('#leo');

动态绑定 class 的方法：

在 Vue 中，我们可以使用对象语法或数组语法来动态绑定 class。

1. 对象语法：

使用对象语法时，我们可以直接在 :class 属性中定义一个包含多个键值对的对象。每个键值对代表一个 class 名称和一个布尔值，当布尔值为 true 时，该 class 将被添加。

<button :class='{"active": tabName === tab, "tab-button": true}'>

2. 数组语法：

使用数组语法时，我们可以将需要添加的 class 名称存储在一个数组中。

<button :class='["tab-button", {"active": tabName === tab}]'>

常见错误写法：

A 选项： {"tab-button”:true,active}
- 错误原因：语法错误，缺少引号。正确的写法应该是 {"tab-button":true, "active": true}
D 选项： ['tab-button’,active]
- 错误原因：active 应该是一个对象，用于判断是否添加 active 类。

结论：

使用对象语法或数组语法都可以完成选项卡的动态绑定 class 功能。B 和 C 选项都是正确的，只是属性的顺序不同。

最佳实践：

建议使用对象语法，因为它更加清晰易懂，并且可以方便地添加或删除多个 class。

总结：

本文详细介绍了 Vue3 中使用动态绑定 class 的方法，并分析了常见错误写法。希望本文能帮助读者更好地理解 Vue3 的 class 绑定机制。