vue ref 用法

简单些个小demo 点击后数字+1，闪闪效果。

<template>
   <div class="test5-space">
    <button v-show="show"  ref="testDiv">{{String(num).length>2?num:'0'+num}}</button>
  </div>
</template>
<script>
import { setTimeout, setInterval } from 'timers';
export default {
    data(){
        return {
            show:true,
            num:0,
        };
    },
    methods:{
        testClick(){
            var test = this.$refs.testDiv.innerText;
            this.$refs.testDiv.addEventListener('click',()=>{
             console.log(test,this.show = this.$refs.testDiv.hidden);
              setInterval(()=>{
                    this.show = !this.show;
                    setTimeout(()=>{
                        this.show = true;
                    },300)
                     this.num = this.num+1;
                    console.log(this.num);
              },500)
        }); 
        }
    },
    mounted(){
       this.testClick();
    },
}
</script>

结果

image.png

优化之后代码：

<template>
  <div class="test5-space">
    <el-button ref='div' class="btn" :class="{'hide-btn':!show}">{{number}}</el-button>
  </div>
</template>
<script>

export default {
  data() {
    return {
      num:1,
      show:true
    };
  },
  computed:{
    number(){
      var num = String(this.num);
      return  num.length==1?'0'+num:num;
    }
  },
  methods: {
  },
  mounted() {
    this.$refs.div.$el.addEventListener('click',()=>{
      setInterval(()=>{
        this.show = false;
        setTimeout(()=>{
          this.show = true;
        },300)
        this.num += 1;
      },1000)
    })
  }
};
</script>

<style lang="less">
.test5-space {
  background: white;
  padding: 0 !important;
  min-height: initial !important;
  height: 98%;

  canvas {
    width: 100%;
    height: 100%;
  }

  .btn {
    transition: opacity 0.3s;
  }

  .hide-btn {
    opacity: 0;
  }
}
</style>

结果

有更好的方法，可以留言,一起学习❤❤❤❤❤❤❤❤