<div id="app">
<ul v-if="fruit.length">
  <li v-for="fruit in fruit">
    {{ fruit.item }}
  </li>
</ul>
<p v-else>No fruit left!</p>
</div>
var vm = new Vue({
  el: '#app',
  data: {
      fruit: [
        { item: 'apple' },
        { item: 'banana' }
      ]
  }
})

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js