vue根据返回数据状态给按钮动态设置disabled属性
需求如下：
根据返回值的状态（status的值），如果值为0/1/2可以使⽤打卡按钮，status的值为其他的则禁⽤。
原按钮为：
<el-button type="primary"size="mini">打卡</el-button>
根据状态渲染：
第⼀种⽅法，采⽤v-if,v-else：
<el-button
v-if="vo.status===0 || vo.status===1 || vo.status===2"
type="primary"
size="mini"
@click="handMember(vo.id,'signin')">打卡
</el-button>
<el-button v-else disabled type="primary"size="mini">打卡</el-button>
这个⽅法是写了两个按钮，只是根据值判断显⽰哪个按钮，代码看着不优雅。
第⼆种⽅法，直接⼀个按钮搞定，⽤三元表达式给disabled添加false或true值：
<el-button
disabled="vo.status!==0 || vo.status!==1 || vo.status!==2 ? false : true"
type="primary"
size="mini"
@click="handMember(vo.id,'signin')">打卡
</el-button>
提醒：上⾯这个⽅法做完后经过检查，有报错。⼤概意思是disabled接受的属性是⼀个布尔值，但是这个布尔值是不能直接在标签内改的。
草率了，没仔细检查，博⽂都发出去了才发现这个问题，
经过反复调试，发现 :disabled=“true” 这样设置是有效的，还是上⾯的思路，只是把disabled属性绑定在⼀个变量上。
这样好办，改为下⾯这样：
<el-button
:disabled="vo.status===0 || vo.status===1 || vo.status===2 ? false : true"
type="primary"
size="mini"
htmlbutton属性
@click="handMember(vo.id,'signin')">打卡
</el-button>
简写形式为：
<el-button
:disabled="!(vo.status===0 || vo.status===1 || vo.status===2)"
type="primary"
size="mini"
@click="handMember(vo.id,'signin')">打卡
</el-button>
这下放⼼使⽤，绝对没有问题，已经反复测试过。
好了，就酱。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。