vue3怎么获取选中的复选框
时间: 2024-02-18 11:55:48 浏览: 24
在 Vue3 中,可以通过 v-model 指令来绑定复选框的选中状态,然后通过在 data 中定义一个数组来存储选中的值。具体实现如下:
```html
<template>
<div>
<label>
<input type="checkbox" v-model="checkedValues" value="value1">
Value 1
</label>
<label>
<input type="checkbox" v-model="checkedValues" value="value2">
Value 2
</label>
<label>
<input type="checkbox" v-model="checkedValues" value="value3">
Value 3
</label>
</div>
</template>
<script>
export default {
data() {
return {
checkedValues: []
}
}
}
</script>
```
在上面的代码中,我们定义了一个数组 checkedValues 来存储选中的值。然后在每个复选框上都绑定了 v-model 指令,将其值绑定到 checkedValues 数组中。这样,当用户选中或取消选中某个复选框时,checkedValues 数组中对应的值就会被添加或移除。
相关问题
vue获取复选框选中的值
可以通过以下方式获取复选框选中的值:
1. 使用 `v-model` 绑定选中状态
```html
<div id="app">
<input type="checkbox" id="apple" value="apple" v-model="checkedFruits">
<label for="apple">Apple</label>
<br>
<input type="checkbox" id="banana" value="banana" v-model="checkedFruits">
<label for="banana">Banana</label>
<br>
<input type="checkbox" id="orange" value="orange" v-model="checkedFruits">
<label for="orange">Orange</label>
<br>
<button @click="showCheckedFruits">Show Selected Fruits</button>
</div>
<script>
new Vue({
el: "#app",
data: {
checkedFruits: []
},
methods: {
showCheckedFruits() {
console.log(this.checkedFruits);
}
}
});
</script>
```
在上面的例子中,我们使用 `v-model` 绑定了 `checkedFruits` 数组,当复选框选中时,Vue会自动更新数组中的值。然后,我们可以使用 `showCheckedFruits` 方法来获取选中的水果。
2. 使用 `@change` 事件监听选中状态变化
```html
<div id="app">
<input type="checkbox" id="apple" value="apple" @change="updateCheckedFruits($event)">
<label for="apple">Apple</label>
<br>
<input type="checkbox" id="banana" value="banana" @change="updateCheckedFruits($event)">
<label for="banana">Banana</label>
<br>
<input type="checkbox" id="orange" value="orange" @change="updateCheckedFruits($event)">
<label for="orange">Orange</label>
<br>
<button @click="showCheckedFruits">Show Selected Fruits</button>
</div>
<script>
new Vue({
el: "#app",
data: {
checkedFruits: []
},
methods: {
updateCheckedFruits(event) {
const isChecked = event.target.checked;
const value = event.target.value;
if (isChecked) {
this.checkedFruits.push(value);
} else {
const index = this.checkedFruits.indexOf(value);
this.checkedFruits.splice(index, 1);
}
},
showCheckedFruits() {
console.log(this.checkedFruits);
}
}
});
</script>
```
在上面的例子中,我们使用 `@change` 事件来监听复选框选中状态的变化。当复选框选中时,我们将其值添加到 `checkedFruits` 数组中;当复选框取消选中时,我们从数组中删除其值。然后,我们可以使用 `showCheckedFruits` 方法来获取选中的水果。
vue3 ant table复选框默认选中
你可以在 `columns` 中设置 `defaultChecked` 属性来设置默认选中的状态,例如:
```vue
<template>
<a-table :columns="columns" :data-source="dataSource"></a-table>
</template>
<script>
export default {
data() {
return {
dataSource: [
{
key: 1,
name: 'John',
age: 32,
},
{
key: 2,
name: 'Mike',
age: 25,
},
{
key: 3,
name: 'Lucy',
age: 28,
},
],
columns: [
{
title: 'Name',
dataIndex: 'name',
},
{
title: 'Age',
dataIndex: 'age',
},
{
title: 'Selected',
dataIndex: 'selected',
defaultChecked: true, // 默认选中
scopedSlots: { customRender: 'selected' },
},
],
};
},
};
</script>
```
在上面的示例中,我们将 `Selected` 列的 `defaultChecked` 属性设置为 `true`,因此默认情况下所有复选框都会被选中。如果你需要根据数据动态设置复选框的选中状态,可以在数据源中为每一行数据添加一个 `selected` 属性,并将其设置为 `true` 或 `false`。然后,在 `Selected` 列的 `scopedSlots` 中使用 `selected` 插槽来渲染复选框,并将 `checked` 属性设置为 `selected` 的值,例如:
```vue
<template>
<a-table :columns="columns" :data-source="dataSource"></a-table>
</template>
<script>
export default {
data() {
return {
dataSource: [
{
key: 1,
name: 'John',
age: 32,
selected: true,
},
{
key: 2,
name: 'Mike',
age: 25,
selected: false,
},
{
key: 3,
name: 'Lucy',
age: 28,
selected: true,
},
],
columns: [
{
title: 'Name',
dataIndex: 'name',
},
{
title: 'Age',
dataIndex: 'age',
},
{
title: 'Selected',
dataIndex: 'selected',
scopedSlots: {
customRender: 'selected',
},
},
],
};
},
};
</script>
<template #selected="{ text, record }">
<a-checkbox :checked="record.selected"></a-checkbox>
</template>
```
在上面的示例中,我们在数据源中为每一行数据添加了一个 `selected` 属性,并将其设置为 `true` 或 `false`。然后,在 `Selected` 列的 `scopedSlots` 中使用 `selected` 插槽来渲染复选框,并将 `checked` 属性设置为 `selected` 的值,这样就可以根据数据动态设置复选框的选中状态了。