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所以才用了这种方法