原來純文字也可以是任意門。

我們已經學了好幾個常用的v-指令(Directives)，今天我們就來用這幾個指令來實作圖片的瀏覽。

先把功能列出來：

• 圖片可以一張張瀏覽
• 可以選擇上一張、下一張切換
• 如果第一張就沒有上一張的按鈕; 如果最後一張就沒有下一張的按鈕

邏輯部分：

• 圖片的網址可以以陣列包起來
• 使用v-for，並把index也取出來，只要是下一張index+1,上一張index-1
• 上下張按鈕用@click綁定，可以用v-if來控制，index不是 0，以及index小於陣列長度-1 來辦到

Vue 實例的部分

• 用Data初始化資料
• 用methods綁定 DOM 的觸發

開始囉～
先看Codepen實際會跑的狀況

HTML 部分

<div id="show-photos">
    <a href="#" @click="prev" v-show="index != 0">prev</a>
    <span> | </span>
    <a href="#" @click="next" v-show="index < imgArray.length-1">next</a>
    <hr/>
    <img :src="imgArray[index]" title=""/>
</div>

JS Vue 實例部分
記得要把 Vue.js 載入文件裡喔～

const vm = new Vue({
  el: '#show-photos',
  data: {
    imgArray: [
      'http://aydasunuroglu.com/wp-content/uploads/se_terramadre01.jpg',
      'http://aydasunuroglu.com/wp-content/uploads/se_terramadre02.jpg',
      'http://aydasunuroglu.com/wp-content/uploads/se_terramadre03.jpg',
      'http://aydasunuroglu.com/wp-content/uploads/se_terramadre06.jpg',
      'http://aydasunuroglu.com/wp-content/uploads/se_terramadre04.jpg',
    ],
    index: 0,
  },
  methods: {
    prev: function () {
      this.index--;
    },
    next: function () {
      this.index++;
    },
  },
});

有沒有發現使用 Vue 可以讓程式碼變得很簡單？我們也可以加上自動播放的功能，大家可以試試看喔～

每日一句法文有益身心：Pardon ! --> 八.喝.動！ 抱歉!(不小心的狀況下，例：踩到別人的腳)。