基本的技術都講的差不多了，接下來要了解一下實做上的重要觀念了，用「資料驅動畫面」，也就是說畫面是由資料決定的。

範例實做：

今天就用一個選單當範例吧，這個選單靠「資料」長出來，並可以顯示目前所在位置(active)：

<template>
  <div id="app">
    <nav>
      <a v-for="(item,index) in navList"
        :class="{active:tab === index}"
        @click="tab = index"
        :key="item"
      >{{ item }}</a>
    </nav>
  </div>
</template>

<script>
  export default {
    name: 'app',
    data() {
      return {
        tab: 0,
        navList: ['本月活動','超值套餐','人氣加點','分店資訊']
      }
    }
  }
</script>

<style scoped>
  #app {
    font-family: 'Microsoft JhengHei', 'Apple LiGothic Medium', 'PMingLiU',
    'sans-serif', 'serif';
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: center;
    justify-content: center;
  }
  nav {
    display: inline-block;
    border: 1px solid #aaaaaa;
    border-radius: 5px;
  }
  a {
    display: inline-block;
    padding: 10px 20px;
    color: #474747;
  }
  a:not(:last-child) {
    border-right: 1px solid #aaaaaa;
  }
  a:hover {
    color: #888888;
    cursor: pointer;
    background-color: #dedede;
  }
  .active {
    background-color: #e8792e;
    color: white;
  }
  .active:hover {
    color: white;
    cursor: default;
    background-color: #e8792e;
  }
</style>

範例解說：

陣列v-for https://ithelp.ithome.com.tw/articles/10202408
V-bind:class https://ithelp.ithome.com.tw/articles/10205397
事件處理v-on https://ithelp.ithome.com.tw/articles/10206346

• data()內寫入資料tab:為0，以及加入navList選單陣列資料。
• 選單標籤<a>使用v-for帶入navList資料，並取得陣列資料itme(項目)及index(序號)(index是由0開始算起)。
• 綁入class，條件為class name是active，active使用tab資料(剛在data()中設定為0)，並會等於index(序號)，因此預設的條件結果就是class name綁在第一個選項上。
• 綁入@click事件，點下後目標index(序號)的值會取代tab的值，因此當我點到第二個選項(index序號為1)時，tab的值會等於1。回到上面說的綁class，tab此時由0改為1，class name就會改綁到選項二上面去了。
• 最後寫入選單的css。

完成就能看到，畫面上的選單會依照資料長出來，並在點選後加入class name active以標示出目前位置，也就是說tab資料決定了active綁在哪，而用index知道你點了誰。

以上就是利用資料驅動畫面的範例。