在vue2中 使用js 在页面中插入dom节点<div>获取验证码</div> 点击该节点后 60秒内不能再点击 节点中的文字变为 重新获取() 并在括号内实时显示60秒倒计时 倒计时结束后 节点文字变成获取验证码

可以使用Vue组件的方式来实现这个功能。

首先，在页面中注册一个组件：

<template>
  <div class="get-verify-code" @click="handleClick" :class="{disabled: disabled}">
    {{ buttonText }}
  </div>
</template>

<script>
export default {
  data() {
    return {
      disabled: false,
      buttonText: '获取验证码',
      countDown: 0
    }
  },
  methods: {
    handleClick() {
      if (!this.disabled) {
        this.disabled = true
        this.buttonText = '重新获取(' + this.countDown + 's)'
        let timer = setInterval(() => {
          this.countDown--
          this.buttonText = '重新获取(' + this.countDown + 's)'
          if (this.countDown == 0) {
            clearInterval(timer)
            this.disabled = false
            this.buttonText = '获取验证码'
          }
        }, 1000)
        this.countDown = 60
      }
    }
  }
}
</script>

<style scoped>
.get-verify-code {
  width: 120px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  background-color: #409EFF;
  color: #fff;
  cursor: pointer;
}

.get-verify-code.disabled {
  background-color: #ccc;
  cursor: not-allowed;
}
</style>

然后在需要使用的地方引入该组件：

<template>
  <div>
    <get-verify-code></get-verify-code>
  </div>
</template>

<script>
import GetVerifyCode from '@/components/GetVerifyCode.vue'

export default {
  components: {
    GetVerifyCode
  }
}
</script>

这样就可以实现在页面中插入DOM节点，并点击后60秒内不能再点击，节点中的文字变为“重新获取()”，并在括号内实时显示60秒倒计时，倒计时结束后节点文字变成“获取验证码”。