vue-demo.html

<div id="app">
  <h1 @click="toggleAppDesc">{{ appTitle }}</h1>
  <p v-if="toggleAppDesc">A simple Todo List app to demostrate how Vue.js works.</p>
  <input type="text" v-model="newTodo" @keyup.enter="addTodo">
  <ul>
    <li v-for="todo in todoList">
      <h2>{{ todo.title }}</h2>
      <p>{{ todo.desc }} <button @click="delTodo($index)">&times;</button></p>
    </li>
  </ul>
</div>

<script src="//cdn.bootcss.com/vue/1.0.17/vue.min.js"></script>
<script>
new Vue({
  el: '#app',
  data: {
    appTitle: 'Todo List',
    newTodo: '',
    toggleAppDesc: true,
    todoList: [
      {title: '1', desc: 'todo1'},
      {title: '2', desc: 'todo2'},
      {title: '3', desc: 'todo3'},
      {title: '4', desc: 'todo4'}
    ]
  },
  methods: {
    delTodo ($index) {
      this.todoList.splice($index, 1);
    },
    addTodo () {
      this.todoList.push({
        title: this.newTodo.length,
        desc: this.newTodo.split(',').pop()
      });
      this.newTodo = '';
    },
    toggleAppDesc () {
      this.toggleAppDesc = !this.toggleAppDesc;
    }
  }
})
</script>