v-bind 样式绑定与类名绑定

v-bind样式绑定
数组形式
[{width:‘200px’,height:‘200px’},{background:‘pink’}]
数组中可写对象形式 对象形式之间用，分隔 /对象内键值对形式 键值对之间用，分隔 属性值用单引号
:style="[bg,size] / data: {
style: {
width: ‘100px’,
height: ‘100px’,
background: ‘pink’
},
bg: {
background: ‘yellow’,
},
size: {
width: ‘100px’,
height: ‘100px’
}
}
数据中直接绑定数据/ 【】内直接写/选中/vm中数据选项中的数据名
数据/键值对形式/对象形式
对象形式
:style="{width:‘100px’,height:‘100px’,background:‘red’}
对象形式/{}内键值对形式 属性值加单引号 键值对之间用，分隔
数据绑定
:style=“style” data: {
style: {
width: ‘100px’,
height: ‘100px’,
background: ‘pink’
},
bg: {
background: ‘yellow’,
},
size: {
width: ‘100px’,
height: ‘100px’
}
}
直接绑定数据名
逻辑运算符绑定
:style=" 5>3&&style"
v上绑定vm中数据style 利用逻辑运算符控制元素渲染与否 逻辑运算符结果为true 有元素渲染style数据绑定渲染/逻辑运算符结果为false style数据绑定无元素渲染
:style=“flag&&style”
v上绑定vm中数据flag和style 当绑定flag 数据为true 时 style 数据有条件渲染 当绑定的flag数据为false 时 绑定的style数据无渲染
data: {
flag: true,
}
v-bind类名绑定
数组形式
:class=’[bg,size]’
【】内直接绑定vm中的数据 用 ，分隔
:class="[bg,flag?size:‘size’]"
设置条件 可以控制 绑定的数据执行与否 可以设置的条件可以是vm中绑定的数据 三目运算符/三元运算符
:class="[bg,flag&&size||size]"
设置条件为 逻辑运算符
对象形式

vm中的数据绑定样式 :class='[bg,size]' 可以是直接绑定的vm数据 {bg:true,size:true} {}内写键值对 键值对用，分隔 v中绑定vm 中的数据 键为数据绑定vm中的数据 值为条件 当条件为true 时 绑定数据渲染 当条件为false 时绑定数据不渲染 bg:3>1,size:true 条件可以是运算符 {bg:flag,size:flag} 条件可以是绑定vm中的数据 只要结果为true /false {[bg]:flag,[size]:flag} 键值对 中的键可以加【】 {[bg]:5>3?'a':'a',[size]:true} 条件可以为逻辑运算符 结果是true/flasev-bind样式绑定 数组形式 [{width:'200px',height:'200px'},{background:'pink'}] 数组中可写对象形式 对象形式之间用，分隔 /对象内键值对形式 键值对之间用，分隔 属性值用单引号 :style="[bg,size] / data: { style: { width: '100px', height: '100px', background: 'pink' }, bg: { background: 'yellow', }, size: { width: '100px', height: '100px' } } 数据中直接绑定数据/ 【】内直接写/选中/vm中数据选项中的数据名 数据/键值对形式/对象形式 对象形式 :style="{width:'100px',height:'100px',background:'red'} 对象形式/{}内键值对形式 属性值加单引号 键值对之间用，分隔 数据绑定 :style="style" data: { style: { width: '100px', height: '100px', background: 'pink' }, bg: { background: 'yellow', }, size: { width: '100px', height: '100px' } } 直接绑定数据名 逻辑运算符绑定 :style=" 5>3&&style" v上绑定vm中数据style 利用逻辑运算符控制元素渲染与否 逻辑运算符结果为true 有元素渲染style数据绑定渲染/逻辑运算符结果为false style数据绑定无元素渲染 :style="flag&&style" v上绑定vm中数据flag和style 当绑定flag 数据为true 时 style 数据有条件渲染 当绑定的flag数据为false 时 绑定的style数据无渲染 data: { flag: true, } v-bind类名绑定 数组形式 :class='[bg,size]' 【】内直接绑定vm中的数据 用 ，分隔 :class="[bg,flag?size:'size']" 设置条件 可以控制 绑定的数据执行与否 可以设置的条件可以是vm中绑定的数据 三目运算符/三元运算符 :class="[bg,flag&&size||size]" 设置条件为 逻辑运算符 对象形式 vm中的数据绑定样式 :class='[bg,size]' 可以是直接绑定的vm数据 {bg:true,size:true} {}内写键值对 键值对用，分隔 v中绑定vm 中的数据 键为数据绑定vm中的数据 值为条件 当条件为true 时 绑定数据渲染 当条件为false 时绑定数据不渲染 bg:3>1,size:true 条件可以是运算符 {bg:flag,size:flag} 条件可以是绑定vm中的数据 只要结果为true /false {[bg]:flag,[size]:flag} 键值对 中的键可以加【】 {[bg]:5>3?'a':'a',[size]:true} 条件可以为逻辑运算符 结果是true/flase