# v-for、key
## ==v-for基本用法==
簡單來說 就是for迴圈再搭配 v-shop 搭配 把他顯示渲染出來

 <div id="app">
      <ul>
         <!-- 如果v-show是 true將會顯示  -->
        <li v-for="(item , idx) in listArr" v-show="item.show">{{ item.name }}</li>
      </ul>
    </div>
    <script src="./js/vue.js"></script>
    <script>
      const { reactive } = Vue;
      const App = {
        setup() {
          const listArr = reactive([
            { name: "2020 Vue3 專業職人 | 入門篇", show: true },
            { name: "2020 Vue3 專業職人 | 加值篇", show: false },
            { name: "2020 Vue3 專業職人 | 進階篇", show: true },
            { name: "現代 JavaScript 職人之路｜入門篇", show: true },
            { name: "現代 JavaScript 職人之路｜中階實戰篇", show: false },
          ]);
          return {
            listArr,
          };
        },
      };
      Vue.createApp(App).mount("#app");

## ==key的重要性==

key可以讓迴圈列表認定唯一值，而不會重複渲染 ==(key必需是唯一值)==

v-bind:key="item.name"