如何检测V-if内容是否已更改

Question

我正在尝试在类“错误”时应用jquery选择器，当v-if条件变为false时，我怎么能听v-if如果改变。

<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>