Vue 用checkbox實現兩兩組合多選且禁用第三個。
阿新 • • 發佈:2020-09-19
本案例結合vant元件實現。思路是一樣的。
關鍵詞:Vue-2,checkbox的disabled屬性和change事件,v-if判斷
template:
<van-checkbox-group v-model="isChe" @change="checkboxChange()"> <van-checkbox name="0" :disabled="canChoose1">選項0</van-checkbox> <van-checkbox name="1" :disabled="canChoose2">選項1</van-checkbox> <van-checkbox name="2" :disabled="canChoose3">選項2</van-checkbox> </van-checkbox-group> <div v-if="show1">容器1</div> <div v-if="show2">容器2</div> <div v-if="show3">容器3</div>
data:
data(){ return{ isChe: [], canChoose1:false, canChoose2: false, canChoose3: false, show1: false, show2: false, show3: false, } }
methods:
checkboxChange() { console.log(this.isChe); if (this.isChe.indexOf("0") > -1) { this.show1 = true; } else { this.show1 = false; } if (this.isChe.indexOf("1") > -1) { this.canChoose3 = true; this.show2 = true; } else { this.canChoose3 = false; this.show2 = false; } if (this.isChe.indexOf("2") > -1) { this.canChoose2 = true; this.show3 = true; } else { this.show3 = false; this.canChoose2 = false; } },