如何檢測V - 如果內容已更改

Question

我想應用jquery選擇器類「錯誤」時，如果條件變爲false，我如何可以聽V - 如果更改。

<template> 
 
    <div class="view1"> 
 
    <div v-if="ok"> 
 
    <p class="right">OK</p> 
 
    </div> 
 
    <div v-else> 
 
    <p class="wrong">NO</p> 
 
    </div> 
 
    </div> 
 
</template> 
 
<script> 
 
    export default { 
 
    mounted(){ 
 
     $('.wrong').animate({width:'20%'},2000); 
 
    } 
 
    } 
 
</script>

Answer 1

你可以用CSS，而不是jQuery的做到這一點。訣竅是有一個寬度過渡，並在應用寬度風格延遲。您通過使用watch來聆聽更改。

new Vue({ 
 
    el: '.view1', 
 
    data: { 
 
    ok: true, 
 
    delayedReaction: null 
 
    }, 
 
    methods: { 
 
    toggle() { 
 
     this.ok = !this.ok; 
 
    } 
 
    }, 
 
    watch: { 
 
    ok() { 
 
     if (this.ok) { 
 
     this.delayedReaction = null; 
 
     } else { 
 
     // nextTick didn't suffice 
 
     setTimeout(() => { 
 
      this.delayedReaction = { 
 
      width: '20%' 
 
      }; 
 
     }, 0); 
 
     } 
 
    } 
 
    } 
 
});

.wrong { 
 
    background-color: #fdd; 
 
    transition: width 2s; 
 
    width: 100%; 
 
}

<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.min.js"></script> 
 
<div class="view1"> 
 
    <div v-if="ok"> 
 
    <p class="right">OK</p> 
 
    </div> 
 
    <div v-else> 
 
    <p class="wrong" :style="delayedReaction">NO</p> 
 
    </div> 
 
    <button @click="toggle">Toggle</button> 
 
</div>