vue checkbox

Question

<h3>多选绑定一个数组</h3>
       <p>
            <input type="checkbox" id="JSPang" value="JSPang" v-model="web_Names">
            <label for="JSPang">JSPang</label><br/>
            <input type="checkbox" id="Panda" value="Panda" v-model="web_Names">
            <label for="JSPang">Panda</label><br/>
            <input type="checkbox" id="PanPan" value="PanPan" v-model="web_Names">
            <label for="JSPang">PanPan</label>
            <p>{{web_Names}}</p>
       </p>
       

大神帮我分析下 v-model 绑定checkbox 的原理， value v-model 与person之间的关系，有点蒙。。。

Answer 1

PS:我理解你的person就是web_Names
当v-model绑定的web_Names中含有当前这一项的value时,即为选中状态,不包含,即为未选中状态.

Answer 2

CheckBox的v-model数据和value的双向性。
1.一方向：选中的value值可以传到v-model进而形成一个数组，数组里面是已经选中的选项的value
2.一方面：拿一个带有部分value的数组，通过v-model和value匹配，变成选中状态