uniapp checkbox单选
时间: 2023-08-29 13:10:01 浏览: 176
checkbox单选功能
在uniapp中,可以使用`<checkbox>`标签来创建多选框。如果想要实现单选功能,则需要在代码中添加一些逻辑。
首先,在`<checkbox>`标签中添加`@change`事件,用于监听选中状态的变化。然后,在`<checkbox>`标签中添加`v-model`指令,用于绑定选中状态。
接着,在`@change`事件中添加逻辑,判断如果当前选中,则将其他选项的选中状态设为false。
以下是示例代码:
```html
<template>
<div>
<checkbox v-model="checked1" @change="handleChange">选项1</checkbox>
<checkbox v-model="checked2" @change="handleChange">选项2</checkbox>
<checkbox v-model="checked3" @change="handleChange">选项3</checkbox>
</div>
</template>
<script>
export default {
data() {
return {
checked1: false,
checked2: false,
checked3: false
}
},
methods: {
handleChange(e) {
const checked = e.target.checked
const name = e.target.name
if (checked) {
this.checked1 = false
this.checked2 = false
this.checked3 = false
this[name] = true
}
}
}
}
</script>
```
在上述示例代码中,使用了`name`属性来标识每个选项,这样在处理逻辑时可以知道哪个选项被选中了。在`handleChange`方法中,首先获取当前选中状态和选项名,然后判断如果当前选中,则将其他选项的选中状态设为false,最后将当前选项的选中状态设为true。这样就实现了单选功能。
阅读全文