image.png

需求

點(diǎn)擊下一個(gè)，顯示3的下一個(gè)數(shù)字4，這個(gè)時(shí)候的內(nèi)容為 234，接著點(diǎn)擊上一個(gè)，顯示2的上一個(gè)數(shù)字1，這個(gè)時(shí)候的內(nèi)容為123。

代碼

template

<div class="a2">
  <div class="aa1" :style="{'margin-left': num * 20 + 'px','transition': 'all .3s ease-out .1s',}">
    <div class="aa11" v-for="(item,index) in aa" :key="index">
      <div>{{ item }}</div>
    </div>
  </div>
</div>
<button @click="prev">上一個(gè)</button>
<button @click="next">下一個(gè)</button>

script

export default {
  data(){
    return {
      num: 0,
      aa: ['1','2','3','4','5','6','7','8','9','10','11','12','13','14','15'],
    }
  },
  methods: {
    prev(){
      if (this.num < 0) {
        this.num += 1;
      }
    },
    next(){
      if (this.num > -(this.aa.length + this.num)) {
        this.num -= 1;
      }else if(this.num < -(this.aa.length + this.num) && -(this.aa.length + this.num) != -0){
        this.num -= 1;
      }
    }
  },
}

css

.a2{
  background: plum;
  width: 60px;
  overflow: hidden;
}
.aa1{
  display: flex;
  border: 1px solid red;
}
.aa11{
  width: 20px;
  border: 1px solid red;
  margin-right: 10px;
}