---
tags: Mike課程
---
# checkbox

* 我們在後端有些資料結構上例如購物車有很多的類別tag標籤

   const { reactive } = Vue;
    const App = {
      setup() {
        const courseslist = reactive({
          //賦予空陣列 讓複選的VALUE 可綁定v-mode中
          selectArr: [],
          tags: [
            { tag: "JavaScript" },
            { tag: "Html" },
            { tag: "Css" },
            { tag: "Html5" },
            { tag: "Vuejs" },
            { tag: "React" },
            { tag: "Sass" },
            { tag: "Css3" },
            { tag: "Canvas" },
          ],
        });

        const getSubmit = (() => {

          console.log(courseslist.selectArr);
        });
        return { courseslist, getSubmit };
      },

* 我們將這些資料放入html中並綁定資料跑回圈印出、包含ID、VALUE、FOR都需要綁定。

 <li v-for="item in courseslist.tags" :key="item.tag">
          <input type="checkbox" :id="item.tag" :value="item.tag" v-model="courseslist.selectArr" />
          <label for="item.tag">{{item.tag}}</label>
        </li>