vue 通过动态绑定class，改变样式-蒲公英云

vue 通过动态绑定class，改变样式

根据输入框或者下拉选择框有没有值，改变按钮可不可用，及按钮颜色

<el-select v-model="selectData.id" placeholder="请选择">
    <el-option label="请选择" value=""></el-option>
         <el-option
              v-for="item in allData"
              :key="item.id"
              :label="item.id"
              :value="item.id">
    </el-option>
</el-select>
<el-button  size="mini" icon="iconfont icon-tianjia" 
    :disabled='isAddBtnDisabled'
    v-bind:class="addButtonStyle"
    >  添加
/el-button>
<script>
    data () {
        return {
        allData:{
        {id:''},
        {id:''}
        },
        selectData:{
            id:''
        },
        isAddBtnDisabled:false, //按钮是否可用
        }
    },
    methods: {
    },
    //计算属性
    computed:{
    addButtonStyle(){
        if(this.selectData.id != ''){
                this.isAddBtnDisabled = false;
                return 'addButtonAvailable';
            }else{
                this.isAddBtnDisabled = true;
                return 'addButtonUnAvailable';
            }
    }
    }
</script>
<style scoped lang="less">
    .addButtonAvailable {
        background-color: orange;
         color: #FFFFFF;
    }
    .addButtonUnAvailable {
        background-color: #7B7B7B;
        color: #FFFFFF;
    }
</style>