vue结合v-for和input实现多选列表checkbox

在 Vue 中可以使用v-for指令结合数据绑定来实现多选列表。以下是具体步骤：

一、HTML 结构

<div id="app">
  <ul>
    <li v-for="item in items" :key="item.id">
      <input type="checkbox" v-model="selectedItems" :value="item">
      {{ item.name }}
    </li>
  </ul>
</div>

在上述代码中，使用v-for循环遍历items数组，为每个元素生成一个<li>标签。每个<li>标签中包含一个复选框和对应的文本内容。复选框的v-model绑定到selectedItems数组，用于存储被选中的项。

二、Vue 实例

new Vue({
  el: '#app',
  data: {
    items: [
      { id: 1, name: '选项 1' },
      { id: 2, name: '选项 2' },
      { id: 3, name: '选项 3' }
    ],
    selectedItems: []
  }
});

在 Vue 实例中，定义了items数组作为原始数据，以及selectedItems数组用于存储被选中的项。

这样，当用户勾选复选框时，对应的项会被添加到selectedItems数组中，取消勾选时会从该数组中移除。

代码实例

template

<div class="list">
      <div class="car-item" v-for="item in carList" :key="item.id" >
         <input  class="checkbox" type="checkbox" :value="item" @change="carSelectListChange" v-model="carSelectList"/>
         <div class="name">{{item.name}}</div>
      </div>
    </div>

js

<script>
export default {
  name: "index",
  data(){
    return{
      // 车辆表格数据
      carList: [],
      carSelectList:[],

    }
  },
  methods:{
    carSelectListChange(){
      console.log(this.carSelectList)
    }
  }
}
</script>