vue radio复选框
时间: 2023-10-29 20:57:46 浏览: 114
Vue.js表单标签中的单选按钮、复选按钮和下拉列表的取值问题
Vue.js中实现单选框的方法是通过使用`<input type="radio">`标签和`v-model`指令来绑定选项的值。下面是一个示例代码:
```html
<template>
<div>
<input type="radio" id="man" value="man" v-model="gender">
<label for="man">男</label>
<input type="radio" id="woman" value="woman" v-model="gender">
<label for="woman">女</label>
</div>
</template>
<script>
export default {
data() {
return {
gender: '' // 存储当前选中的值
}
}
}
</script>
```
对于多选框,可以使用`<input type="checkbox">`标签和`v-model`指令来实现。以下是一个示例代码:
```html
<template>
<div>
<input type="checkbox" id="option1" value="option1" v-model="selectedOptions">
<label for="option1">选项1</label>
<input type="checkbox" id="option2" value="option2" v-model="selectedOptions">
<label for="option2">选项2</label>
</div>
</template>
<script>
export default {
data() {
return {
selectedOptions: [] // 存储当前选中的值,以数组形式表示
}
}
}
</script>
```
以上代码中,`selectedOptions`是一个数组,用来存储用户选择的多个选项的值。
请注意,上述代码仅为示例,您可以根据实际需求进行修改和扩展。
阅读全文