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-enter-active仅在该元素停留在第一个更改后才触发，并且根本不会触发任何更改

Answer 1

例如（未测试）：

在模板中：

<transition name="somewhat" appear>
<div class="up" v-if="bigger" key="up"></div>
<div class="down" v-else key="down"></div>
</transition>

在脚本部分：

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