The very first Vue.js example
HTML
<script src="http://vuejs.org/js/vue.min.js"></script>
<div id="demo">
<odd v-bind:number="number"></odd>
<input v-model="number">
</div>
CSS
.change-enter-active
{
background-color: yellow;
visibility: visible;
transition: visibility 3s;
}
.change-enter-to
{
background-color: red;
visibility: hidden;
}
JavaScript
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
})