uni-app根据data值动态设置checkbox、radio是否选中
uni-app
2019-09-29 09:51:42
uni-app根据动态值设置单选、多选是否为选中,具体实现效果如下:
0表示未选中,1表示选中。
效果如图:
效果图完整代码:
<template>
<view class="agreement">
<view>
<label class="radio">
<radio value="1" :checked="radioCheck == 1?true:false" />选中</label>
<label class="radio">
<radio value="0" :checked="radioCheck == 0?true:false"/>未选中</label>
</view>
<checkbox-group>
<label>
<checkbox value="1" :checked="checkboxCheck == 1?true:false" color="#FFCC33" style="transform:scale(0.7)" />选中
</label>
<label>
<checkbox value="0" :checked="checkboxCheck == 0?true:false" color="#FFCC33" style="transform:scale(0.7)" />未选中
</label>
</checkbox-group>
</view>
</template>
<script>
export default {
data() {
return {
radioCheck:1,
checkboxCheck:0,
}
},
onShow() {
console.log("单选按钮动态值:"+this.radioCheck)
console.log("多选按钮动态值:"+this.checkboxCheck)
},
}
</script>
<style lang='scss'>
</style>
关键点解析:通过三元二次表达式来判断是为true还是false,进行选中和未选中操作。
三元二次表达式用法解析:
表达式 (expr1) ? (expr2) : (expr3)
在 expr1 求值为 TRUE 时的值为 expr2,在 expr1 求值为 FALSE 时的值为 expr3。
radio属性说明:
属性名 | 类型 | 默认值 | 说明 |
---|---|---|---|
value | String | <radio> 标识。当该 <radio> 选中时,<radio-group> 的 change 事件会携带 <radio> 的 value | |
checked | Boolean | false | 当前是否选中 |
disabled | Boolean | false | 是否禁用 |
color | Color | radio的颜色,同css的color |
checkbox属性说明:
属性名 | 类型 | 默认值 | 说明 |
---|---|---|---|
value | String | <checkbox> 标识,选中时触发 <checkbox-group> 的 change 事件,并携带 <checkbox> 的 value。 | |
disabled | Boolean | false | 是否禁用 |
checked | Boolean | false | 当前是否选中,可用来设置默认选中 |
color | Color | checkbox的颜色,同css的color |
六月初字帖坊小程序
你想要的字帖模板及工具,这里都有!
881篇文章
9003人已阅读