需求

vue实现图片验证码展示，点击图片验证码可切换。

/**
* @Author: 858834013@qq.com
* @Name: vrifyCode
* @Date: 2022-07-05
* @Desc:实现图片验证码展示，点击图片验证码可切换
*/
<template>
  <div class="vrifyCode">
    <img v-if="show" @click="refresh" src="/captcha/getKaptcha" alt="">
  </div>
</template>

<script>

export default {
  name: "vrifyCode",
  components: {},
  data() {
    return {
      show: true
    }
  },
  watch: {},
  mounted() {
  },
  methods: {
    refresh() {
      this.show = false
      this.$nextTick(() => {
        this.show = true
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.vrifyCode {
  width: 110px;
  height: 40px;
  cursor: pointer;

  img {
    width: 110px;
    height: 40px;
  }
}
</style>