一、前言

上一節我們介紹了v-bind指令（爲元素綁定屬性），詳見博文：Vue筆記整理，讓你快速入門Vue.js：03_8.本地應用：v-bind指令（爲元素綁定屬性）這篇博文我們來寫一個小案例：圖片切換

二、實現思路

1、點擊切換圖片，其實本質是切換 img 標籤的 src 屬性值。

屬性用什麼操作？在 Vue 中，我們可以使用 v-bind 指令。

2、圖片的個數有很多個，我們可以使用數組，數組的取值我們結合索引。

並且使用數組，我們可以非常便捷的判斷，是否爲第一張或是最後一張。

我們只需判斷索引的值和數組的長度大小即可。

3、在第一張和最後一張圖片的時候，我們分別隱藏左邊和右邊的箭頭。

顯示隱藏箭頭，其實本質是操縱 a 標籤的 display，a 標籤在點擊的時候，要執行邏輯，事件綁定用 v-on 指令。

在第一張或是最後一張的時候，我們需要對應的 a 標籤。

爲了實現這個功能，我們學過兩個指令，一個是 v-if，一個是 v-show，

但是因爲切換的比較頻繁，所以考慮性能的話，我們使用 v-show 指令，會更加的適合。

三、實戰代碼

1、具體代碼

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <title>圖片切換</title>
  <link rel="stylesheet" href="./css/index.css" />
</head>

<body>
  <div id="mask">

    <div class="center">
      <h2 class="title">
        <img src="./images/logo.png" alt="">
        深圳創維校區環境
      </h2>
      <!-- 圖片 
      爲中間的圖片綁定 src 屬性，使用 v-bind指令，這裏是它的簡寫方式。
      詳見博文：https://blog.csdn.net/YuDBL/article/details/105030229
      -->
      <img :src="imgArr[index]" alt="" />

      <!-- 左箭頭 
        v-if 指令不適合頻繁使用,頻繁使用用v-show指令。因爲v-if操作dom樹對於性能的消耗比較大
        詳見博文：https://blog.csdn.net/YuDBL/article/details/105021608
      -->
      <a href="javascript:void(0)" v-show="index!=0" @click="prev" class="left">
          <img src="./images/prev.png" alt="" />
        </a>
      <!-- 右箭頭 -->
      <a href="javascript:void(0)" v-show="index<imgArr.length-1" @click="next" class="right">
        <img src="./images/next.png" alt="" />
      </a>
    </div>

  </div>

  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

  <script>
    var app = new Vue({
      el: "#mask",
      data: {
        imgArr: [
          "./images/00.jpg",
          "./images/01.jpg",
          "./images/02.jpg",
          "./images/03.jpg",
          "./images/04.jpg",
          "./images/05.jpg",
          "./images/06.jpg",
          "./images/07.jpg",
          "./images/08.jpg",
          "./images/09.jpg",
          "./images/10.jpg",
        ],
        index: 0
      },
      methods: {
        prev:function(){
          this.index--;
        },
        next:function(){
          this.index++;
        }
      },
    })
  </script>
</body>

</html>