work-notes（6）：vue中 v-for，class 和 style 中绑定带入变量的写法，如何在style中加入变量？

时间：2022-04-14

更新：2022-04-18

原因解释

在 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-2_allfirst_rank_ecpm_v1~rank_v31_ecpm-1-80682867.142^v9pc_search_result_cache,157^v4new_style&utm_term=%3Aclass%E5%86%99%E6%B3%95&spm=1018.2226.3001.4187