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