优秀的编程知识分享平台

网站首页 > 技术文章 正文

Vue学习(基础编)-v-bind绑定class对象语法

nanyue 2024-11-02 12:20:49 技术文章 7 ℃

在Vue中v-bind可以绑定一些html属性,但用在比较多的地方就是v-bind绑定class属性上,话不多说,直接上代码。如下图,我们一般是直接在class中加属性,也可以在Vue中使用data数据active,将active绑定到class上,这里说下v-bind:class = :class

我们看下效果:

大家可能发现这种写法差不多,甚至用Vue写得更加麻烦,接下给大家展示class对象的写法,在class中用键值对的形式写,当class中属性为true时,就是显示两个属性。

显示效果如下:这样我们就能用Vue控制ture和false来决定是否显示属性。

下面我们定义个isActive属性来决定class的属性,请看下面的列子,我们使用个按钮来决定class的变化,点击按钮将message的颜色进行改变。

请看实现效果图

如果我有讲的不对的方法,谢谢大家指正。

最近发表
标签列表