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(){
            //一、獲取文本框輸入的值   二、把文本框的值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>