vue入门例子 增删条目

vue栗子

---

html

<div id="app">
  <input v-model="newTodo" v-on:keyup.enter="addTodo">
  <ul>   <!--绑定数据-->          <!--绑定键盘事件-->
    <li v-for="todo in todos"><!--渲染列表-->
      <span>{{ todo.text }}</span>
      <button v-on:click="removeTodo($index)">X</button> //$index
    </li>
  </ul>
</div>

js

new Vue({
  el: '#app',
  data: {
    newTodo: '',
    todos: [//数组
      { text: 'Add some todos' }
    ]
  },  //不要漏掉符号！
  methods: {
    addTodo: function () {
      var text = this.newTodo.trim()//去掉首尾空格
      if (text) {
        this.todos.push({ text: text })
        this.newTodo = ''
      }
    },
    removeTodo: function (index) {
      this.todos.splice(index, 1)//删除数组一个元素
    }
  }
})

—–从获取元素append中解放出来
起步-vue.js
菜鸟vue入门教程