一. style写法

1.

<div :style="{ width: '13px', height: '13px', borderRadius: '50%', backgroundColor: this.dataObj.status == 'red' ? 'red' : this.dataObj.status == 'yellow' ? 'yellow' : this.dataObj.status == 'green' ? '#1eab75' : ' ' }"></div>

 2.

<div :style="{ color: textColor, fontSize: fontSize + 'px' }">Hello World</div>
在data中定义 textColor和fontSize

 3.数组形式

<div :style="[baseStyles, overridingStyles]"></div>
baseStyles: {
      width: '100px',
      height: '100px'
    },
    overridingStyles: {
      background: 'red',
      height: '200px'
    }

 4.计算属性

<div :style="setIconStyle"></div>
computed：{
//动态设置样式
etIconStyle() {
 return 'color: #333; fontSize: 14px'
 }
}

 二.class写法

 1.<div :class="isTrue ? 'active' : ''"></div>
在data中定义isTrue   active为样式

 2.计算属性判断<div :class="{ active: isActive }"></div>
computed: {
    isActive() {
      return this.isTrue; // 这里的值可以根据需要进行修改
    }
  },
data中定义isTrue 
 .active {
  /* 添加相应的样式 */
}

 3.:class="[isActive,isSort]"   
data() {
  return{
    isActive:'active',
    isSort:'sort'
 }
}

4.<div :class="[{ 'active': isActive }, { 'sorted': isSort }]">Hello, Vue!</div>
如果isActive为true，则元素会应用active类；