在
Vue.js中，
获取页面内所有
复选框选中的
值通常需要通过`v
-model`指令绑定数据属性，并利用事件监听或者计算属性来实现。以下是一个基本的例子：
首先，在HTML模板中，每个
复选框可以这样设置：
```html
<template>
<div id="
checkboxes">
<input type="
checkbox" v
-model="selectedItems[]" :value="item.value" v
-for="(item, index) in items" @change="updateSelectedItems(index)">
<div v
-for="item in selectedItems">{{ item }}</div>
</div>
</template>
```
这
里，`v
-model`绑定了数组`selectedItems[]`，`:value`表示
复选框的
值，当
复选框状态改变时，会触发`@change`事件。
然后，在你的
Vue实例的data
里初始化一个空数组：
```javascript
export default {
data() {
return {
items: [
{ value: &#
39;Option 1&#
39; },
{ value: &#
39;Option 2&#
39; },
// ...更多选项
],
selectedItems: []
};
},
methods: {
updateSelectedItems(index) {
if (this.$event.target.checked) {
this.selectedItems.push(this.items[index].value);
} else {
const value = this.items[index].value;
this.selectedItems = this.selectedItems.filter(item => item !== value);
}
}
}
}
```
在这个例子中，`updateSelectedItems`方法会在
复选框变化时更新`selectedItems`数组。
如果你想一次性
获取所有
选中的
值，可以直接访问`selectedItems`数组。如果你想在组件之外
获取这些
值，可以暴露一个方法供外部调用，或者使用
Vuex管理状态。
//获取页面里所有复选框选中的值
...{
var strSel="";
...{
}
}
扫一扫
543
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
