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

Vue.js数据变更转换

1 个答案: