<div id="app">
  <h1>買い物リスト</h1>
  <input type="text" v-model="newTask" />
  <button v-on:click="addTask">追加する</button>
  <ul>
    <li v-for="task in tasks">
      {{task}}
    </li>
  </ul>
</div>
var app = new Vue({
  el: '#app',
  data: {
    tasks: [
      "牛乳",
      "卵",
      "スポンジ"
    ],
    newTask: ""
  },
  methods: {
    addTask: function(){
      this.tasks.push(this.newTask)
    }
  }
})
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17-beta.0/vue.js