vue中通过v-for循环遍历得到的值如何加到dom节点的属性中以及vue将多选框选中的值渲染到页面

话不多说直接上代码

<script>
       Vue.component('CheckBox',{
           props:{
               values:{
                   type:Array
               },
           },
           data(){
               return{
                checked: []
               }
           },
           template:`
           <div>
                <div v-for="item in values">
                    <input type="checkbox" :id="item" :value="item" v-model="checked">
                    <label :for="item">{{item}}</label>
                </div>
                <span>Checked names: {{ checked}}</span>
            </div>
           `,
           
       })
       new Vue({
           el:'#app',
           template:`<div>
                  <CheckBox :values="['苹果','草莓','橘子']"/>
             </div>
           `,
})

语法为 :属性名="item"