首页 文章

Vue.js在数据更改时进行转换

提问于
浏览 次
3

在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仅在该元素保留后的第一次更改时触发，并且根本不会触发任何更改

vue.js

1 回答

  • 2

    例如（未测试）：

    在模板中：

    <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;
    }
}
    回复于

相关问题