vue 通過動態繫結class,改變樣式
阿新 • • 發佈:2018-12-17
根據輸入框或者下拉選擇框有沒有值,改變按鈕可不可用,及按鈕顏色
<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>