Vue

by Hristiyan Dodov

HTML

<div id="app">
    <input v-model="currency">
    
    <span v-if="converted" @click="show = !show">
        <transition name="fade">
            <span v-if="show" key="a" v-html="converted"></span>
            <span v-else key="b" v-html="original"></span>
        </transition>
    </span>
    <span v-else v-html="original"></span>
</div>

CSS

.fade-enter,
.fade-leave-to {
    opacity: 0;
}

.fade-enter-active,
.fade-leave-active {
    transition: all 0.3s ease;
}

Vue

new Vue({
    el: '#app',
    data: function () {
        return {
            original: '$500',
            currency: 'USD',
            show: true
        };
    },
    computed: {
        converted: function () {
            return (this.currency !== 'USD') ? '€423' : null;
        }
    }
});