uniapp 单选框数据列表中 如何判断选中了几条数据
时间: 2023-12-08 08:03:37 浏览: 106
在uniapp中,可以使用v-model双向绑定数据来实现单选框的选中状态。如果要判断选中了几条数据,可以通过遍历数据列表,判断每个单选框的选中状态来实现。具体步骤如下:
1. 在数据列表中添加一个选中状态的属性,例如isChecked,初始值为false。
2. 在单选框的v-model中绑定isChecked属性,当选中时,isChecked值为true,否则为false。
3. 遍历数据列表,统计isChecked为true的数据个数即可得到选中了几条数据。
示例代码如下:
```html
<template>
<div>
<div v-for="(item, index) in dataList" :key="index">
<label>
<input type="radio" :value="item.value" v-model="item.isChecked">
{{ item.label }}
</label>
</div>
<p>已选中{{ checkedCount }}条数据</p>
</div>
</template>
<script>
export default {
data() {
return {
dataList: [
{ label: '选项1', value: 1, isChecked: false },
{ label: '选项2', value: 2, isChecked: false },
{ label: '选项3', value: 3, isChecked: false },
]
}
},
computed: {
checkedCount() {
return this.dataList.filter(item => item.isChecked).length
}
}
}
</script>
```
在上面的示例代码中,computed属性checkedCount通过过滤isChecked为true的数据来获取选中了几条数据。
阅读全文