Vue图片切换

<div id="mask">
        <div class="center">

            <!-- 图片 -->
            <img  :src=‘picSrc[index]‘ />
            <!-- 左箭头 -->
            <a href="javascript:void(0)" class="left" @click=‘prev‘ v-show=‘index>0‘><!--为箭头的显示添加判断条件-->
                <img src="./images/prev.png"  />
            </a>
            <!-- 右箭头 -->
            <a href="javascript:void(0)" class="right" @click=‘next‘ v-show=‘index<picSrc.length-1‘>
                <img src="./images/next.png"  />
            </a>
        </div>

    </div>

* {
  margin: 0;
  padding: 0;
}

html,
body,
#mask {
  width: 100%;
  height: 100%;
}

#mask {
  background-color: #c9c9c9;
  position: relative;
}

#mask .center {
  position: absolute;
  background-color: #fff;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  padding: 10px;
}
#mask .center .title {
  position: absolute;
  display: flex;
  align-items: center;
  height: 56px;
  top: -61px;
  left: 0;
  padding: 5px;
  padding-left: 10px;
  padding-bottom: 0;
  color: rgba(175, 47, 47, 0.8);
  font-size: 26px;
  font-weight: normal;
  background-color: white;
  padding-right: 50px;
  z-index: 2;
}
#mask .center .title img {
  height: 40px;
  margin-right: 10px;
}

#mask .center .title::before {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  border: 65px solid;
  border-color: transparent transparent white;
  top: -65px;
  right: -65px;
  z-index: 1;
}

#mask .center > img {
  display: block;
  width: 700px;
  height: 458px;
}

#mask .center a {
  text-decoration: none;
  width: 45px;
  height: 100px;
  position: absolute;
  top: 179px;
  vertical-align: middle;
  opacity: 0.5;
}
#mask .center a :hover {
  opacity: 0.8;
}

#mask .center .left {
  left: 15px;
  text-align: left;
  padding-right: 10px;
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
}

#mask .center .right {
  right: 15px;
  text-align: right;
  padding-left: 10px;
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
}

var mask = new Vue({
    el: "#mask",
    data: {
        picSrc: [
            ‘./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: {
        next: function() {
            this.index++
        },
        prev: function() {
            this.index--
        },
        // getPic: function() {
        //     axios.get(‘http://shibe.online/api/shibes?count=10‘)
        //         .then(function(response) {
        //             console.log(response);
        //         })
        //         .catch(function(err) {})
        // },

    }
})```

Vue图片切换

原文：https://www.cnblogs.com/YokeF/p/14885145.html