1. 程式人生 > >vue動態繫結style

vue動態繫結style

專案例項:

:style="{

       boxSizing:'border-box',height:29+'px',top:(valch-1)*29+'px',

       background:chose(val.subjectCode),

        borderLeft:' 10px ' + ' solid ' +         chose1(val.subjectCode

)}"

 <ul class="days">
            <li v-for="(day, index) in days" :key="index">
              <!--本月-->
              <template v-for="(v,k) in resultobj">
                <ul v-if='day.getDate()==key' v-for="(value,key) in v" :key="key">

                  <li v-for="(val,index1) in value">
                    <div class="div" :class="{'xzactive':dd}" @click="show(val,key);a=val" 
                        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>
              </template>
            </li>
   </ul>