vuejs小例子之实现图片的切换

发布时间：2020-12-16 23:03:53 所属栏目：百科来源：网络整理

导读：代码： html head script src ="https://cdn.jsdelivr.net/npm/vue/dist/vue.js" / script style #app { border: 1px solid red; left: 50%; top: 50%; width: 410px; height: 235px; } .bg { position: relative; top: 5px; left: 5px; } .left { position:

代码：

<html>

head>
  script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></scriptstyle>
    #app {
      border: 1px solid red;
      left: 50%;
      top: 50%;
      width: 410px;
      height: 235px;
    }

    .bg {
      position: relative;
      top: 5px;
      left: 5px;
    }

    .left {
      position: absolute;
      top: 104px;
      left: 15px;
    }

    .lbg {
      height: 80px;
      width: 30px;
      opacity: 0.8;
    }

    .right {
      position: absolute;
      top: 104px;
      left: 382px;
    }

    .rbg {
      height: 80px;
      width: 30px;
      opacity: 0.8;
    }
  </>
bodydiv id="app">
    img :src="imgurl[index]" alt="" class="bg"span>
      a href="#"="left" @click="prev" v-show="index!=0">
        =" ./img/left.jpg "=" "="lbg "a="# "="right "="next "="index<imgurl.length-1"="./img/right.jpg "="rbg "div
    var app = new Vue({
      el: '#app',data: {
        imgurl: ["./img/img1.jpg ","./img/img2.jpg ","./img/img3.jpg ","./img/img4.jpg "],index: 0,},methods: {
        prev: function () {
          this.index -= 1;
        },next: function () {
          this.index += 1;
        }
      },})
  >

结果：

最开始显示第一章，然后index=0，不会显示左箭头，点击右箭头：

index=1，显示左箭头，一直点击到显示最后一张：

不显示右箭头了。?

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!