vue綁定樣式的方法

一、綁定class

1. <div :class="[showIcon==='ios'?'active-btn':'','all-btn']" @click="changeCode('ios')">iPhone 下載下傳</div>

2. <li :class="{ centerActive: isActive=='HomeDetail' }" @click="changePage('HomeDetail')">首頁</li>

3. :class="[index==frameActive ? 'frame-item-active' : 'frame-item']"

二、綁定style

1. <div class="center-content" :style="{height:clientHeight-278+'px'}">

2. <div class="bar" :style="barStyle" />
       barStyle: function () {
          return {
            left: `${this.x$ * 100}%`
          }
        },
              

3. areaStyle: function () {
      const style = {
        color: this.shadow,
        borderWidth: this.border + 'px',
        borderColor: this.borderColor,
        boxShadow: '0 0 0 ' + this._shadow,
        borderRadius: (this.round) ? '50%' : ''
      }
      this.ratio >= 1 ? (style.width = '50%') : (style.height = '50%')
      return style
    }
              

4. <div v-html="menuStyleText"></div>
   data(){
   	return{
   		menuStyleText:''
   	}
   }
   mounted(){
   	this.menuStyleText = `<style>
         .pass-input{
           border: 1px solid ${this.linecolor ? this.linecolor : '#eeeeee'};
         }
         .pass-input:last-child{
           border-right: 1px solid ${this.linecolor ? this.linecolor + ' !important' : '#eeeeee !important'};
         }
     }
   </style>`
              

   第四種是因為當時寫了一個元件，然後顔色是從付元件可以傳過來的，但是，因為有last-child是以才用了這種方法