話不多說直接上程式碼

<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"