【Vue表单】v-model绑定复选框checkbox

微信订阅号：Rabbit_svip

用 v-model 绑定复选框，需要在数据模型中建一个数组用来存储。

并且在同一组复选框中，要用 v-model 绑定同一个数据模型。

代码如下

<template>
  <div id="app">
    <input type="checkbox" id="vue" value="Vue.js" v-model="course">Vue
    <input type="checkbox" id="react" value="React.js" v-model="course">React
    <input type="checkbox" id="angular" value="Angular.js" v-model="course">Angular
    <ul>
      <li v-for="(item, index) in course" :key="index">{{item}}</li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'app',
  data () {
    return {
      course: []
    }
  }
}
</script>

上面例子，有三个复选框，并且这三个复选框属于同一组。
所以给这三个 <input> 绑定同样的数据模型。
Vue会为我们检测到三个复选框有相同的数据模型。
然后自动合并这些复选框的值到设置的数组里。

被选中的选项，对应的value值会被添加到 course 数组里。

微信订阅号：Rabbit_svip

被选中的顺序，会直接影响 course 里元素的排序。

在 li 里面，通过 v-for 循环输出复选框被选中的内容。
这里用的Vue版本是2.6，所以在使用 v-for 的时候要指明 key 值。