VueJS - vuejsのonclickメソッドでanimate.cssクラスをバインドする方法はありますか

Question

ボタンをクリックすると、別のdivクラスにanimate.cssクラスを追加またはバインドしません。

Answer 1

多分それはあなたが何を意味ですが、あなたの質問には詳細

var app = new Vue({ 
 
    el: '#app', 
 
    methods: { 
 
    \t animate() { 
 
    let elem = document.querySelector('.another-class') 
 
     if (!elem.classList.contains('bounce')) { 
 
\t \t elem.classList.add('bounce') 
 
     } 
 
\t setTimeout(() => { elem.classList.remove('bounce') }, 1000) 
 
    } 
 
    } 
 
})

<link href="https://cdn.jsdelivr.net/npm/animate.css@3.5.2/animate.min.css" rel="stylesheet"/> 
 
<script src="https://unpkg.com/vue@2.5.9/dist/vue.js"></script> 
 
<div id="app"> 
 
    <h1 class="another-class animated">Animate.css</h1> 
 
    <button @click="animate"> 
 
    animate it 
 
    </button> 
 
</div>