v-on,v-for，v-model的综合应用，增加，删除，统计，清空，隐藏

1. 列表结构可以通过v-for指令结合数据生成
2. v-on结合事件修饰符可以对事件进行限制，比如 .enter
3. v-on在绑定事件时可以传递自定义参数
4. 通过v-model可以快速的设置和获取表单元素的值
5. 基于数据的开发方式 ，优先想到的是数据 v-model="inputValue"双向数据绑定，

@keyup.enter="add" v-on结合事件修饰符实现添加

<header class="header">
      <h1>小黑记事本</h1>
      <input  v-model="inputValue" @keyup.enter="add" autofocus="autofocus" autocomplete="off" placeholder="请输入任务"
        class="new-todo" />
    </header>

v-for="(item,i) in list"遍历数组出现列表结构

{{i+1}}下标为零加一显示为一

<section class="main">
      <ul class="todo-list">
        <li class="todo" v-for="(item,i) in list">
          <div class="view">
            <span class="index">{{i+1}}</span>
            <label>{{item}}</label>
            <button class="destroy" @click="remove(i)"></button>
          </div>
        </li>
      </ul>
    </section>

v-if="list.length!=0"数组长度不等于零时显示，等于时隐藏

{{list.length}}数组的长度，显示的数组个数

@click="clear"点击时清空

<!-- 统计和清空 -->
    <footer class="footer" >    
      <span class="todo-count" v-if="list.length!=0">   <!-- 隐藏 -->
        <strong>{{list.length}}</strong> items left
      </span>
      <!-- @click="clear"清空 -->
      <button class="clear-completed" @click="clear" v-show="list.length!=0">
        Clear
      </button>
    </footer>
  </section>

list:["写代码","写代码","写代码"],数组

add添加方法，remove删除方法， clear清空方法

data: {
        list:["写代码","写代码","写代码"],
        inputValue:"好好学习"       
      },
      methods: {
        add:function(){//添加
          this.list.push(this.inputValue);
        },
        remove:function(i){//删除
          console.log("删除");
          console.log(i);
          this.list.splice(i,1);
        },
        clear:function(){//清空
          this.list=[];
        }              
      },