# Vue 3 筆記
## v-for

// html
<ul>
    <li 
        v-for="(item,index) in listArr" //註1
        v-bind:key="list.name" //註2
        v-show="list.show" //註3
    >
        {{index + 1}}. {{list.name}}
    </li>
</ul>

// javascript
Vue.createApp({
  data() {
    return {
      listArr: [
          { name: 'Mark', show:true }, 
          { name: 'Lucy', show:false },
          { name: 'Larry', show:true },
      ]
    }
  }
}).mount('#array-rendering')

<li>v-for 內最好都給一個key以及一個index值(註1) </li>
<li>以上面這個例子來說NAME可當key值來使用所以 v-bind 就綁定name為 key值 (註2)</li>
<li>這有多加一個v-show, v-show 是使用css來顯示或隱藏該virtual dom, 所以當頁面在渲染時 Lucy 則不會顯示出來 (註3)</li>

#
###### tags: `Vue3`,`javascript`