<h1>jQuery</h1>
<div>
  <p>Length: <span id="length">0</span></p>
  <ul id="list"></ul>
  <button id="add">add</button>
</div>

<h1>Vue.js</h1>
<div id="app">
  <p>Length: {{ length }}</p>
  <ul>
    <li v-for="(item, i) in list" :key="item">{{ item }}
      <button @click="list.splice(i, 1)">remove</button>
    </li>
  </ul>
  <button @click="addItem">add</button>
</div>
(function() {
  var counter = 0
  var list = ['Apple', 'Banana', 'Strawberry']

  init()

  $(document).on('click', '#add', function() {
    addItem('Orange' + (++counter).toString())
  })
  $(document).on('click', '.remove', function(event) {
    $(event.target).parent().remove()
    updateLength()
  })

  function init() {
    for (var i = 0; i < list.length; i++) {
      addItem(list[i])
    }
  }

  function addItem(name) {
    $('#list').append('<li>' + name + ' <button class="remove">remove</button></li>')
    updateLength()
  }

  function updateLength() {
    $('#length').text($('#list li').length)
  }
})()

new Vue({
  el: '#app',
  data: {
    counter: 0,
    list: ['Apple', 'Banana', 'Strawberry']
  },
  computed: {
    length: function() {
      return this.list.length
    }
  },
  methods: {
    addItem: function() {
      this.list.push('Orange' + (++this.counter).toString())
    }
  }
})

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js
  2. https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.min.js