vue 点击一个按钮，循环切换图片

阿wei程序媛

已于 2022-10-25 15:52:07 修改

阅读量858

点赞数

分类专栏： vue 文章标签： vue.js 前端 javascript

于 2022-08-26 16:23:52 首次发布

本文链接：https://blog.csdn.net/m0_58565372/article/details/126545670

版权

vue 专栏收录该内容

38 篇文章 1 订阅

订阅专栏

今天遇到一个需求，点击一个按钮，循环切换图片，1.2.3.1.2.3的循环

实现效果：

1.HTML

<img v-if="activity==1" class="jc" 
      src="../../../assets/images/sendBox/activity/luckydraw/jc1.png">
<img v-if="activity==2" class="jc" 
     src="../../../assets/images/sendBox/activity/luckydraw/jc2.png">
<img v-if="activity==3" class="jc" src="../../../assets/images/sendBox/activity/luckydraw/jc3.png">

2.JS

<script>
export default {
data(){
return {
  activity:1
    }
},
methods:{
//点击切换
  tab() {
      if (this.activity == 1) {
        this.activity = this.activity + 1
      } else if (this.activity == 2) {
        this.activity = this.activity + 1
      } else if (this.activity == 3) {
        this.activity = 1
      }
    },
}
}
</script>

这样就实现了此功能