需求

点击下一个，显示a的下一个字母b，这个时候的内容为 bcd，接着点击上一个，显示b的上一个数字a，这个时候的内容为abc。

代码

template

1
2
3
4
5
6
7
8
9
<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">上一个</button>
<button @click="next">下一个</button>

script

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
export default {
  data(){
    return {
      num: 0,
      aa: ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'a', 'b', 'c'],
    }
  },
  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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
.a2{
  background: plum;
  width: 60px;
  overflow: hidden;
}
.aa1{
  display: flex;
  border: 1px solid red;
}
.aa11{
  width: 20px;
  border: 1px solid red;
  margin-right: 10px;
}