vue中动态绑定style和三目绑定class

 <ul class="wrap">
                  <li v-for="(val,index1) in value" :key="index">
                    <div class="div" :class="buttonClick ? 'classA' : 'classB' " 
                        v-for="(valch,index2) in val.courseTimeCodes" :style=" 
                        {boxSizing:'border-box',height:29+'px',top:(valch- 
                          1)*29+'px',background:chose(val.subjectCode),borderLeft:' 10px ' 
                        + ' solid ' + chose1(val.subjectCode)}">
                      <span v-if="valch!=val.courseTimeCodes[index2+1]-1" :style=" 
    {color:chose1(val.subjectCode),bottom:calcBottom(val.courseTimeCodes,index2)}"> 
            {{commonSubject[val.subjectCode]}}
                     </span>
                  </div>
                  </li>
   </ul>

export default {
      name:"test",
    data () {
      return {
        buttonClick:false,
        classA:"",
        classB:'',
      
      }
    },
}

2.多个class名

 <div :class="{classA:a , classB: b,......}"/></div>



new Vue({
        el:'#app',
        data:{
            a:true,
            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样式绑定,绑定变量

:style="{color:cl,background:bk}"



new Vue({
        el:'#app',
        data:{
            cl:'red',
            bk:'yellow'
        }
    })

style样式绑定,绑定一个对象

:style="testObj"
new Vue({
        el:'#app',
        data:{
            testObj:{
                color:red;
                background:yellow;
            }
        }
    })

style样式绑定,绑定函数返回值

:style="{background:!flag?deep:BackType(sign.status)}"


methods: {
       BackType: function(status) {
      if (status == "已完成") return "#d7f2e6";
      if (status == "工作中") return "#23b7e5";
      if (status == "缺料" || status == "等待" || status == "配料完成")
        return "#ced0d1";
      if (status == "下班" || status == "转产") return "#f8ac59";
      if (status == "质检") return "#ed5565";
    }
  }

祝工作顺利，身体健康