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入门教程