logo

该视频仅会员有权观看

立即开通课程「Vue.js前端应用开发实践」权限。

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