vue 事件结合双向数据绑定实现todolist

<template>


  <div id="app"> 
      
      <input type="text" v-model='todo' />

      <button @click="doAdd()">+增加</button>

      <br>

      <hr>

      <br>

      <ul>

        <li v-for="(item,key) in list">

          {{item}}   ----  <button @click="removeData(key)">删除</button>
        </li>
      </ul>


  </div>
</template>

<script>

    export default {     
      data () { 
        return {
          todo:'' ,
          list:[]
        }
      },
      methods:{

        doAdd(){
            //1、获取文本框输入的值   2、把文本框的值push到list里面

            this.list.push(this.todo);

            this.todo='';
        },
        removeData(key){

            // alert(key)

            //splice  js操作数组的方法

            this.list.splice(key,1);
        }
      }

    }
</script>


<style lang="scss">



</style>