Vue-图片切换实例

实例比较简单，对左箭头与右箭头绑定点击事件，实现img数组遍历。注意的是：首张图片与最后一张图片进行判断隐藏显示。

核心代码

 <div id="mask">
    <div class="center">
      <h2 class="title">
        Vue图片切换实例
      </h2>
      <!-- 图片 -->
      <img :src="imgs[index]" alt="" />
      <!-- 左箭头 -->
      <a href="javascript:void(0)"  class="left" @click="pre" v-show="index > 0">
          <img src="images/prev.png" alt="" />
        </a>
      <!-- 右箭头 -->
      <a href="javascript:void(0)" class="right" @click="next" v-show="index < imgs.length -1 ">
        <img src="images/next.png" alt="" />
      </a>
    </div>
</div>
  
<script>
  new Vue({
    el:"#mask",
    // 挂载
    data:{
    // 图片对象组
      index: 0,
      imgs:[
        "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"
      ]
    },
    methods:{
      pre:function () {
        this.index--;
      },
      next:function () {
        this.index++;
      }
    }
  });
</script>