Vue-todolist完整

ToDoList:

http://www.todolist.cn


使用vue实现以上功能；

<template>
  <div id="app">
   <input type="text" v-model='todo'/>
   <button  @click="doAdd()">+增加</button>
   <div v-for="(item,key) in list" :key="item">
          {{item}}--<button @click="remove(key)">删除</button>
   </div>
</template>
<script>
// import HelloWorld from './components/HelloWorld.vue'
export default {
  // name:"app",
  data(){
     return{
         todo:'',
         list:[]
       }
     },methods:{
         doAdd(){
          //1、获取文本框输入的值
          //2、把文本框的值push到list里面
          this.list.push(this.todo);  
         },
         remove(key){
           this.list.splice(key,1);
         }
     }
}
</script>
<style>

</style>

this.list.pop();— 从最后一个往前删除

this.list.splice(key,1);—从开头第一个开始删除

this.list.push(x); — 集合中添加元素