vue 实现表单多选 --- 并且获取其中的值

说明

使用 v-model 指令 结合 name / value 使用

• 需要你的 data 里面的数据类型为 数组

代码说明

• 为什么会是 v-model.number ？
• 这是将它的值固定为 数字类型，否则你获取到的就是字符串

<div id="root">
    <input type="checkbox" v-model.number="hobby" name="hobby" value="1">学习
    <input type="checkbox" v-model.number="hobby" name="hobby" value="2">游泳
    <input type="checkbox" v-model.number="hobby" name="hobby" value="3">下棋
    <input type="checkbox" v-model.number="hobby" name="hobby" value="4">乒乓球
    <div>{{hobby}}</div>
</div>
</body>
<script>
    new Vue({
        el:"#root",
        data:{
            hobby:[4]  //默认的选择第四个，你可以不选默认项
        },
    })
</script>

• 它现在的值就是 data 数组中的数据，想要获得数据直接使用这个数组