vue学习笔记：Vue批量创建checkbox和radio

使用template批量创建checkbox

<div id='app1'>
    <template v-for="item in items" :key="item.value">
      <input type="checkbox" :id="item.value" :value="item.value" v-model="checkedNames">
      <label :for="item.value">{{item.value}}</label>
    </template>
    <p>checkedNames:{{checkedNames}}</p>
</div>
<script>
new Vue({
    el:"app1",
    data:{
        items:[
            {value:"jack"},
            {value:"rose"},
            {value:"mike"}
        ],
        checkedNames:[]//输出选中的数据
    }
})
</script>

使用template批量创建radio，这次多加了一层。

比如选择性别或者年龄时，可以在一组radio前面加个标识字段。

<div id='app2'>
<template v-for="item in radioItems" :key="item.radioName">
    <div>
        {{item.radioName}}
    </div>
    <template v-for="i in item.radioList">
         <input type="radio" :id="i.value" :value="i.value" :name="item.radioName">
         <label :for="i.value">{{i.value}}</label>
    </template>               
</template>
</div>
<script>
    new Vue({
        el:"app2",
        data:{
            radioItems:
            {
                radioName:"fruit",
                radioList:[
                    {value:"apple"},
                    {value:"pear"},
                    {value:"balana"},
                ]
            },
            {
                radioName:"sex",
                radioList:[
                    {value:"男"},
                    {value:"女"},
                ]
            }
        }
    })
</script>

效果如图

后续考虑如何添加选中、删除事件。

radio这样不知道好不好写事件，checkbox还要加全选功能。。

吐个槽：作为一名主要做后端的，感觉前端好复杂。QAQ