怎么在Vue中使用 v-bind指令动态绑定class(class,v-bind,vue,web开发)

时间:2024-04-29 23:52:35 作者 : 石家庄SEO 分类 : web开发
  • TAG :

    %E6%80%8E%E4%B9%88%E5%9C%A8Vue%E4%B8%AD%E4%BD%BF%E7%94%A8+v-bind%E6%8C%87%E4%BB%A4%E5%8A%A8%E6%80%81%E7%BB%91%E5%AE%9Aclass

v-bind动态绑定class

对象语法绑定(常用)

red和size的值为true就在class显示red和size,false就不显示。下面有两种写法:

注意:v-bind:class指令可以与普通的class特性共存;对应的语法糖:“:class”等于v-bind:class

数组语法绑定

数组语法不常用,主要是它不灵活:

字符串绑定更数组语法绑定差不多,不常用

综合的写法

v-bind动态绑定style

对象语法绑定(常用)

v-bind:style 的对象语法十分直观——看着非常像 CSS,但其实是一个 JavaScript 对象。

注:对象语法的value(属性值),如果加上单引号就原样输出,不加就输出data的变量值

数组语法绑定

v-bind:style 的数组语法可以将多个样式对象应用到同一个元素上:

本文:怎么在Vue中使用 v-bind指令动态绑定class的详细内容,希望对您有所帮助,信息来源于网络。
上一篇:Django如何将默认的SQLite更换为MySQL下一篇:

10 人围观 / 0 条评论 ↓快速评论↓

(必须)

(必须,保密)

阿狸1 阿狸2 阿狸3 阿狸4 阿狸5 阿狸6 阿狸7 阿狸8 阿狸9 阿狸10 阿狸11 阿狸12 阿狸13 阿狸14 阿狸15 阿狸16 阿狸17 阿狸18