データ変更時のVue.jsの遷移

Question

Vueのドキュメントでは、要素を表示または非表示にする方法の例がありますが、値の変更に基づいて移行を表示する場合はどうしたらよいでしょうか。 たとえば、新しい値が古い場合は古い値、3秒間は上向きの値を表示し、古い値の場合は3秒間下の矢印を表示します。 どうすれば実現できますか？ここで

はjsfiddleです： http://jsfiddle.net/d2hs7muq/2/

var data = { 
    number: 1 
} 

Vue.component('odd', 
{ 
    props: ['number', 'oldNumber'], 
    template: `<div>{{number}} 
     <transition name="change"> 
     <div v-if="oldNumber && number > oldNumber"class="up">up</div> 
     <div v-if="oldNumber && number < oldNumber" class="down">down</div> 
     </transition> 
    </div>`, 
    watch: 
    { 
     number: function(number, oldNumber) 
     { 
      var me = this; 
      me.oldNumber = oldNumber; 
     } 
    } 
}); 

var demo = new Vue({ 
    el: '#demo', 
    data: data 
}) 

あなたはCSSの.changeを入力し、アクティブに見ることができるように、その要素が中にとどまり、変更はすべて

でトリガされていない後にのみ最初の変更 時に起動されます例えば

Answer 1

（試験せず）：テンプレートの

：

スクリプトセクションで10

：

data: function() { 
    return: { 
     value: null, 
     bigger: false 
    } 
} 
computed: { 
    ...mapGetters([ 
     'getYourStoreValue' 
    ]) 
}, 
watch: { 
    // value has changed 
    getYourStoreValue: function() { 
     let old = this.value; 
     if (this.getYourStoreValue > old) { 
      this.bigger = true; 
     } else {...etc...} 
     // save new value to 'value' data property 
     this.value = getYourStoreValue; 
    } 
}