1. 程式人生 > >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"
    >&nbsp;&nbsp;新增
/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>