vue实现点击按钮实现图片上下切换

Vue实现简单图片切换效果

   <div class="left_Top">
      <div class="title">乡贤人才</div>
      <div class="content">
        <!-- 要轮询的图片 -->
        <div class="app">
          <img :src="imgarr[index]" />

          <!-- 上箭头 -->

          <a class="qiehuan1" @click="prev" v-show="index != 0">
            <img src="../../assets/images/tupian/up.png" />
          </a>

          <!-- 下箭头 -->

          <a class="qiehuan2" @click="next" v-show="index < imgarr.length - 1">
            <img src="../../assets/images/tupian/down.png" />
          </a>
        </div>
        <div class="rightIntroduce">
          <div class="jieshao">{{ introduce[index] }}</div>
        </div>
      </div>
    </div>

export default {
data(){
return{
imgarr: [
        // 'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
        // 'https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg',
        // 'https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg',
        // 'https://fuss10.elemecdn.com/9/bb/e27858e973f5d7d3904835f46abbdjpeg.jpeg',
      ],

      introduce: [
        // '闻着海棠花开气息,寻着风和日丽云迹,杏花雨轻拂衣,东边晴西边雨落,满目江楼不胜枚举',
        // '泛舟一叶静谧,看日落下昏黄,牵一抹,雁归向南方',
        // '到桥上,你看云落下春光,夏夜吹荷风到梦乡,桃花缀满枝绕远山',
        // '闻着海棠花开气息,寻着风和日丽云迹,杏花雨轻拂衣'
      ],
 index: 0,

}
mehods:{
 prev: function () {
      this.index--;
    },
    next: function () {
      this.index++;
    },
  // 乡县人才
    getTalent () {
      axiosGet("/basicdata/special/list?pageNum=1&pageSize=10&specialType=1").then((res) => {
        console.log(res.rows, "测试1111111111111111");
        if (res.code == 200) {
          res.rows.forEach((item) => {
            console.log('item是啥', item.imgUrl);
            this.imgarr.push(item.imgUrl)
            this.introduce.push(item.remark)
           
          })
        }
      });
    },
  // 乡村文旅
    getTravel () {
      axiosGet("/interest/notice/tirmNoticeList").then((res) => {
        console.log(res.data, "乡村文旅1111111111111111");
        this.travelList = res.data
      });
    },
}
}
}