如何在Vue.js中使元素闪烁

我在jQuery中有一个自定义函数，它可以使元素在单击时闪烁。在Vue中执行此操作的正确方法是什么

我想这是用指令完成的？有没有一种方法可以让我在任何元素中添加“可闪烁”以使其在单击时闪烁

$.fn.blink=函数（）{
var按钮=这个；
var theinterval=setInterval（函数（）{
按钮。切换类（“闪烁”）；
}, 20);
setTimeout（函数（）{
clearInterval（区间）；
按钮。removeClass（“闪烁”）；
}, 400);
};
$（“文档”）.ready（函数（）{
$（“div.blinkable”）。单击（函数（）{
$（this.blink（）；
});
});
分区按钮{
背景：紫色；
颜色：白色；
边缘底部：2px；
填充物：5px；
}
丁克{
背景：红色；
}
按钮1
按钮2
按钮3
按钮4

您也可以使用方法和一些普通JS来完成：

---

您还可以使用一种方法和一些普通的JS：

---

我会选择纯CSS动画

div.button{
背景：紫色；
颜色：白色；
边缘底部：2px；
填充物：5px；
}
分区按钮：激活{
动画：闪烁0.02秒20交替；
}
@关键帧闪烁{
来自{背景色：紫色；}
至{背景色：红色；}
}

按钮1
按钮2
按钮3
按钮4

我会选择纯CSS动画

div.button{
背景：紫色；
颜色：白色；
边缘底部：2px；
填充物：5px；
}
分区按钮：激活{
动画：闪烁0.02秒20交替；
}
@关键帧闪烁{
来自{背景色：紫色；}
至{背景色：红色；}
}

按钮1
按钮2
按钮3
按钮4

指令将是一种方法。你试过了吗？是的，但我不确定该怎么做。我能想到的唯一方法似乎是一种黑客行为。指令就是一种方法。你试过了吗？是的，但我不确定该怎么做。我能想到的唯一方法似乎是黑客攻击。问题是它只在激活时闪烁。我想让它闪烁一整秒钟。问题是它只在激活时闪烁。我想让它眨眼一整秒钟。

methods: {
    blink(event) {

  event.target.style.background = 'red'
  setTimeout(()=>{
    event.target.style.background = 'purple'
  },500)

    }