vue js 点击按钮 div红色边框闪烁

在 Vue.js 中，你可以通过绑定点击事件并使用 CSS 动画来实现按钮点击时 div 元素红色边框的闪烁效果。首先，在模板文件 (.vue) 或者 HTML 文件里添加一个按钮和一个 div：

<template>
  <div class="container">
    <button @click="toggleBorder">点击我</button>
    <div ref="myDiv" class="box"></div>
  </div>
</template>

<script>
export default {
  methods: {
    toggleBorder() {
      this.$refs.myDiv.classList.toggle('border-animation');
    }
  }
}
</script>

<style scoped>
.box {
  width: 200px;
  height: 200px;
  background-color: #f0f0f0;
}

.border-animation {
  border: 5px solid red;
  animation: blink 1s infinite alternate;
}

@keyframes blink {
  0%, 50% { border-width: 0; }
  100% { border-width: 5px; }
}
</style>

在这个例子中，当用户点击按钮时，`toggleBorder` 方法会被调用，它会切换 `border-animation` 类，该类包含 CSS 动画规则让边框在 1 秒内无限地从无到有、从有到无闪烁。`ref` 属性用于在 JavaScript 中引用这个 div。