vue--todolist的实现

简单示例：

<template>
  <div id="Home">
    <v-header></v-header>
    <hr>
    {{title}}
    <br>
    <p><input type="text" v-model="todo" /> <button @click="doAdd()">添加</button></p>
    <p v-for="(x,k) in list">{{x}}---- <button @click="removeData(k)">删除</button></p>
  </div>
</template>
<script>
import Header from './Header.vue';
export default {
  name: 'Home',
  data () {
    return {
      title:'todolist',
      todo:'我是一个值',
      list:[],
    }
  },
  methods:{
    doAdd(){
      this.list.push(this.todo);
    },
    removeData(k){
      console.log(k);
      // splice可以在指定的位置进行删除或添加数据
      this.list.splice(k,1);
    }
  },
  components:{
    'v-header':Header,
  }
}
</script>