第六课 点击事件调用自定义方法

<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>