v-bind 绑定 class、style 属性
- v-bind 绑定 class 属性对象语法
- v-bind 绑定 class 属性数组语法
- v-bind 绑定 style 属性对象语法
- v-bind 绑定 style 属性数组语法
-————————————————————————————————————————-
- v-bind 绑定 class 属性对象语法
对象语法的含义是 :class 后面跟的是一个对象，语法格式:
<span :class="{类名: 布尔值}"></span>
使用示例:
当布尔值为 true 时才显示该类名
:class 属性是一个对象，对象中的键值可以是布尔值，也可以是 vue 示例中的 data 数据名称
<span :class="{actived: isShow}"></span><span :class="{active: true, image: false}"></span>
当和普通的类同时存在时，不会冲突，会自动进行合并, 下面 class 属性结果为: class=”online active”
<span class="online" :class="{active: true, image: false}"></span>
如果过于复杂，可以对象放在 computed、methods 中 (数组语法也可以放)
<span :class="attr">computed 计算属性</span><span :class="action()">methods 方法</span>v-bind 绑定 class 属性数组语法
数组语法的含义是 :class 后面跟的是一个数组，语法格式:
<div :class="['active', 'image']"></div>
当数组中的值可以是字符串，也可以是 vue 实例中的 data 数据
<div :class="[color, fontSize]"></div>v-bind 绑定 style 属性对象语法
对象语法的含义是 :style 后面跟的是一个对象，语法格式:
<span :style="{css属性名: 属性值}"></span>
基础使用 (30px 必须加引号，否则会被当成变量解析)
<div :style="{fontSize: '30px', color: 'red'}">{ {message}}</div>
:style 值也可以是 vue 实例中的 data 数据 (css 是一个对象)
<div :style="css">{ {message}}</div>v-bind 绑定 style 属性数组语法
:style 数组语法就是后面跟一个数组，数组元素是对象，语法格式:
使用示例: (css1, css2 时 vue 示例中 data 数据对象)
<div :style="[css1, css2]">{ {message}}</div>
喜欢ヅ旅行
淩亂°似流年
傷城~
还没有评论，来说两句吧...