vue实现复选框默认勾选功能案例

一、概述

1. 最近在学习vue相关知识。通过菜鸟教程中单选框、复选框渲染的代码测试之后，自己也写了一下代码来实现复选框如何默认勾选的功能；

二、案例介绍

1. 实现思路
   定义一个对象数组来存储id值、和中文名称，除此之外，再定义一个对象，对象里面放置一个数组来存储想要被勾选的id集合。
2. 代码实现

<template>
    <div id="computed_props" class="cls2">
         <label v-for="post in postIdList" :key="post">
             <input type="checkbox" :value="post.postId" v-model="user.postIdList" >{{post.postName}}
         </label>
</div>
</template>
<script>
export default {
  name: 'ComputedProp',
  data () {
    return {
      postIdList: [{'postId': 0, 'postName': '董事长'}, {'postId': 1, 'postName': '董事长秘书'}],
      user: {
        'name': '测试管理者',
        postIdList: [1, 2]
      }
    }
  },
  methods: {
  },
  computed: {
  },
  watch: {
}
</script>
<style>
</style>

3. 页面效果
   
4. 代码分析
   主要是通过 :value和v-model双向绑定完成复选框的默认勾选。首先通过label标签中的v-for循环遍历postIdList对象数组，:value来绑定循环过程中每次取出的对象id，进而与user对象中postIdList数组中id值进行匹配，如果含有，就默认勾选；不含有，就不勾选；