Image switching



<body>
    <div id="mask">
        <div class="center">
            <h2 class="title">
                <img src="./images/logo.png" alt="">Shenzhen Skyworth Campus environment</h2>
            <! - image - >
            <img :src="imgArr[index]" alt="" />
            <! -- Left arrow -->
            <a href="javascript:void(0)" v-show="index! = 0" @click="prev" class="left">
                <img src="./images/prev.png" alt="" />
            </a>
            <! -- Right arrow -->
            <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=".. /js/vue.js"></script>
    <script>
        const 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>
Copy the code
  • Store the image path as an array, when it is the first imagev-show="index! = 0", hide the left arrow
  • When switching to the best image, usev-show="index<imgArr.length-1", the number of switched images is less than the image array length -1, which is the last image specified
  • The left and right arrows each bind two methods to click events
  • Test effect: When the page is in the first image, the toggle arrow on the left is hidden by the V-show property display: None

  • When you switch to the last image, the arrow on the right is hidden

  • Using v-if instead of v-show can achieve the same effect, but using V-if directly removes the element from the DOM. The performance cost is higher than using V-show, and v-if is not recommended