时间:2022-04-14
更新:2022-04-18
文章目录
- 原因解释
- :class 写法
- 1、三元运算
- 2、变量
- 3、对象
- 4、数组
- :style 写法
- 1、变量
- 2、对象
- 3、三元运算
原因解释
在 v-for 写入到 style 或 class,特别是绑定的 :style、:class 就不生效
:class 写法
1、三元运算
(1)首先拿一个变量(value)作为判断值;
(2)当为判断结果为 true ,此时付给该盒子 class名1 ,否则 class名2;
(3)注意,最外层为 双引号,内层为 单引号;
<div :class="[value === 'true'? 'className1' : 'className2']"></div>
.className1 {
color: red;
}
.className2 {
color: blue;
}
2、变量
<div :class="{classA:a, classB:b}"></div>
new Vue({
el:'#app',
data:{
a:true, // 根据 true/false 判断是否执行 class
b:true,
}
})
3、对象
<div :class="test"></div>
new Vue({
el:'#app',
data:{
test:{
color:red;
background:yellow;
}
}
})
4、数组
<div :class="[test1, test2]"></div>
new Vue({
el:'#app',
data:{
test1Class:test1,
test2Class:test2
}
})
:style 写法
1、变量
<div :style="{height: H + 'px' }">你懂的</div>
new Vue({
el:'#app',
data:{
H: 250,
}
})
2、对象
<div :style="testObj">你懂的</div>
new Vue({
el:'#app',
data:{
testObj:{
color: yellow;
background: yellow;
}
}
})
3、三元运算
<div :style="{'height': (item.height >= 177 ? '182' : '180') + 'px'}">你懂的</div>
参考文献
https://blog.csdn.net/weixin_39581226/article/details/80682867?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522165034843216780271519866%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fall.%2522%257D&request_id=165034843216780271519866&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2allfirst_rank_ecpm_v1~rank_v31_ecpm-1-80682867.142v9pc_search_result_cache,157v4new_style&utm_term=%3Aclass%E5%86%99%E6%B3%95&spm=1018.2226.3001.4187