vue 数组对象提取_[Vue]Vue.js中复选框列表(checkbox list)绑定数组对象并获取选中的数组对象值...

前言

在Vue.js的前端编程开发中，我们有时候需要使用复选框列表(checkbox list)来绑定数组对象，并在获取复选框列表(checkbox list)中所有选中的数组对象的子列表。

实例描述

比如，当前有iPhone 8 Plus的规格：容量、颜色、网络类型、套餐类型，包对应的规格选项分别为：

容量：64G, 256G

颜色：金色, 红色

网络类型: 4G全网通, 4G电信, 4G移动

套餐类型: 普通套餐, 高级套餐

以上规格选项均复选框列表(checkbox list)展示，其中最终展示的结果类似如下：

Vue.js解决方案

在Vue.js中，要解决上述问题还是比较容易的，我们只需要绑定复选框checkbox的value和v-model即可，具体实现代码如下：

HTML:

{ {prop.name}}

{ {op.value}}

{ {selectedProperties}}

{ {foos}}

JS:

new Vue({

el: '#app',

computed:{

foos(){

return this.selectedProperties.map(item => item.value);

}

},

<