一 创建测试项目

vue init webpack-simple vuedemo

二 进入demo目录

cd vuedemo

三 安装依赖

cnpm install

四 修改代码App.vue

<template>
  <div id="app">
    <input type="text" v-model="todo"/>
    <button @click="doAdd()">+ add</button>

 <ul>
  <li v-for="(item,key) in list" :key="item.id">
  {{key}} {{item}}--- <button @click="removeData(key)">Delete</button>
  </li>
  </ul>
  </div>
</template>

<script>
export default {
  name: "app",
  data() {
    return {
      todo:'',
      list: []
    };
  },
  methods:{
    doAdd(){
      this.list.push(this.todo);
      this.todo = ""
    },
    removeData(key){
      this.list.splice(key, 1)
    }
  }


};
</script>

<style>
</style>

五 运行

npm run dev

image.png

六 总结

1 复习控件事件@click
2 列表的用法
push 添加元素到列表
splice 删除从 index 处开始的零个或多个元素

七 参考

https://cn.vuejs.org/v2/guide/events.html
http://www.runoob.com/jsref/jsref-splice.html