vue点击重复执行animate动画
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>title</title>
<meta name="viewport" content="width=640,target-densitydpi=320,user-scalable=no">
<meta name="viewport"
content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
<link rel="stylesheet" href="./css/elementui.css">
<link rel="stylesheet" href="./css/index.css">
<script src="js/vue.js"></script>
<script src="js/elementui.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" />
<style>
</style>
</head>
<body>
<div id="app">
<h1 class="animate__animated" :class="classname">请输入手机号码</h1>
<span @click=err()>错误</span>
</div>
<script>
new Vue({
el: '#app',
data: {
classname: ''
},
methods: {
err() {
let that = this //如果定时器用普通函数就需要that哦，不然拿不到this
this.$nextTick(function() {
this.classname = '' //清空样式
setTimeout(() => {
that.classname = 'animate__shakeX' //设置动画
}, 0)
})
}
}
})
</script>
</body>
</html>