JQ 與 Vue 結合

範例結果

二、【#app】html結構利用Vue替代

S1:html結構

  <div id="app">
    <ul class="title">
      <li class="on"><p data-en="Kobenhavn">北歐丹麥│哥本哈根</p><span>現代化建築與歷史文物的結合</span></li>
      <li><p data-en="Venice">義大利│威尼斯</p><span>相滄桑又有活力的浪漫水都 愈夜愈美麗</span></li>
      <li><p data-en="River Thames">英國倫敦│泰晤士河畔</p><span>泰晤士河沿岸的美麗景致與觀光景點,白晝明亮壯麗,夜晚增添幾許浪漫情愫</span></li>
      <li><p data-en="Sheikh Zayed BinSultan Nahyan Mosque">阿聯酋│阿布扎比大清真寺</p><span>這座極到奢華、富麗堂皇的清真寺就在阿布達比,與世人見面</span></li>
      <li><p data-en="Alsterarkaden">德國│阿爾斯特拱廊</p><span>優雅的白色阿爾斯特拱廊沿著湖畔延伸,令人想起威尼斯的典雅風格。</span></li>
    </ul>
    <div class="on" data-file="travel01"></div>
    <div data-file="travel02"></div>
    <div data-file="travel03"></div>
    <div data-file="travel04"></div>
    <div data-file="travel05"></div>
  </div>

S2:Vue結構

利用S2步驟 html結構修改為Vue 結構

  <div id="app">
    <ul class="title">
      <li v-for="(list,id) in lists" :class="id==0?'on':''">
        <p :data-en="list.title_en">{{list.title}}</p>
        <span>{{list.desc}}</span>
      </li>
    </ul>
    <div v-for="(list,id) in lists" :data-file="'travel0'+(id+1)" :class="id==0?'on':''"></div>
  </div>