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

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

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

我们看下效果:

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

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

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

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

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

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

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

请看实现效果图

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

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

展开阅读全文

页面更新:2024-03-25

标签:列子   绑定   对象   能用   写法   中用   效果图   美文   语法   请看   按钮   属性   定义   麻烦   形式

1 2 3 4 5

上滑加载更多 ↓
推荐阅读:
友情链接:
更多:

本站资料均由网友自行发布提供,仅用于学习交流。如有版权问题,请与我联系,QQ:4156828  

© CopyRight 2020-2024 All Rights Reserved. Powered By 71396.com 闽ICP备11008920号-4
闽公网安备35020302034903号

Top