学习vue.js第二节——TodoList案例

<div id="app">
    <input type="text" name="name" v-model="inputValue">
    <button v-on:click="handleBtnCilck">提交</button>
    <button v-on:click="handleBtnClickEmpty">清空</button>
    <ul>
      <li v-for="item in list">{{item}}</li>
    </ul>
</div>

<script>
   var vm = new Vue({
    el:'#app',
    data:{
       list:[], 
       inputValue:''
    },
    methods:{  //方法
     handleBtnCilck: function(){
        this.list.push(this.inputValue),
        this.inputValue = ''
     },
     handleBtnClickEmpty: function(){
        vm.$data.list = [],
        this.inputValue = ''
     }
    }
   })
</script>

本案例，是一个TodoList案例,当你在input输入值，点击添加，触发handleBtnCilck方法，获取inputValue数据push到list数组，list数组接收到数据则会展示到li标签里面，同时会清空input，点击取消，触发handleBtnClickEmpty方法，清空list数组和input数据。