# v-bind:attribute

我們利用v-bind 可以綁定 : class、 src 、等屬性綁定與資料連結

 <div id="app">
      <ul>
        <!--  v-bind:class  做綁定   -->
        <li v-for="(item, idx) in listArr" v-bind:key="item.name" v-bind:class="item.status">
          {{idx + 1}}. {{item.name}}
        </li>
      </ul>
    </div>
    <script src="./js/vue.js"></script>
    <script>
      const { reactive } = Vue;
      const App = {
        setup() {
          const listArr = reactive([
            { name: "2020 Vue3 專業職人 | 入門篇", status: "red" },
            { name: "2020 Vue3 專業職人 | 加值篇", status: "blue" },
            { name: "2020 Vue3 專業職人 | 進階篇", status: "red" },
            { name: "現代 JavaScript 職人之路｜入門篇", status: "red" },
            { name: "現代 JavaScript 職人之路｜中階實戰篇", status: "blue" },
          ]);
          return {
            listArr,
          };
        },
      };
      Vue.createApp(App).mount("#app");
    </script>