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:'',
      
      }
    },
} <ul class="wrap">
                  <li