- 可以在视图组件的元素上动态绑定class,使用
:class
指令来判断条件,以决定是否添加特定的类名,例如active
。 - 组件的数据部分可以包含菜单项数据(
menu items
)和表示当前激活项的变量(current item
)。 - 可以使用
v-for
指令和一个key
绑定来循环输出菜单项,并在元素上动态绑定active
类,根据current item
与索引index
的比较来判定激活状态。 - 元素可以绑定点击事件,用以更新
current item
以反映当前点击的菜单项。 - 在组件的样式中,可以使用
menu
选择器,并为active
类设置样式,例如文字颜色为紫色。 - 动态和静态类可以一起使用,如果需要同时绑定,可以在
:class
中使用数组结构。 - 在浏览器中预览效果,激活状态下的菜单项会显示紫色,点击不同菜单项会更新为激活状态,并在元素上添加
active
类。