vue中动态绑定类名v-bind:class的几种常见的用法(以导航菜单点击高亮为例讲解)

问题描述

vue中动态绑定类名:class的用法比较灵活,本案例以导航菜单点击高亮为例,简单进行讲解,我们先看一下最终的效果图。
vue中动态绑定类名v-bind:class的几种常见的用法(以导航菜单点击高亮为例讲解)_第1张图片

方式一(对象写法)

代码图示如下

vue中动态绑定类名v-bind:class的几种常见的用法(以导航菜单点击高亮为例讲解)_第2张图片



方式二(methods写法)

代码图示如下

vue中动态绑定类名v-bind:class的几种常见的用法(以导航菜单点击高亮为例讲解)_第3张图片

代码附上



方式三(computed写法)

计算属性的写法和methods的写法略有不同,请看注释

代码附上



总结

:class除了上述三种写法以外,还有数组的写法、三元表达式的写法。不过我个人觉得,别的写法和上述介绍的写法都类似,触类旁通。灵活运用上述三种写法,基本上可以解决绝大多数的问题场景

好记性不如烂笔头,记录一下。最后附上vue官方文档的地址: cn.vuejs.org/v2/guide/cl…

你可能感兴趣的:(vue中动态绑定类名v-bind:class的几种常见的用法(以导航菜单点击高亮为例讲解))