Filtered Computed Property
A conditional rendering demo in VueJs using the v-if directive - http://coligo.io
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.2/vue.min.js"></script>
<div id="vue">
<ul v-for="item in reverseItems" :key="item.id">
<li> {{ item.id }} </li>
<li>{{ item.message }} </li>
</ul>
</div>
JavaScript
var vm = new Vue({
el: '#vue',
data() {
return {
items: [
{id: 51, message: 'first'},
{id: 265, message: 'second'},
{id: 32, message: 'third'}
],
}
},
computed: {
reverseItems() {
return this.items.slice().reverse();
}
}
});