vue中动态绑定class和style

中心点:1. 三目运算  2. class和style前面千万不要忘记加"："

class动态绑定

<i v-if="icon" :class="['el-icon-' + icon]" class="el-input__icon material-input__icon" />
icon是数据中动态返回的值，可以用在循环中，便于不同的class名称，动态添加

或者

 <i :class="show?'el-icon-close':'el-icon-setting'" />  show为动态设置的变量

 

style动态绑定

 <i class="el-icon-d-arrow-right arrow_show_more" :style="{transform:currentType ? 'rotate(-90deg)' : 'rotate(90deg)'}" @click="dropFun"></i>
或者
 <i class="el-icon-d-arrow-right arrow_show_more" :style="{transform:currentType == 1 ? 'rotate(-90deg)' : 'rotate(90deg)'}" @click="dropFun"></i>

currentType为动态设置的变量

 

两者还可以通过组件动态传值赋值

<div :id="id" :class="className" :style="{height:height,width:width}" />

export default {

  props: {

    className: {

      type: String,

      default: 'chart'

    },

    id: {

      type: String,

      default: 'chart'

    },

    width: {

      type: String,

      default: '200px'

    },

    height: {

      type: String,

      default: '200px'

    }

  },

}