vue 实现todolist，包含添加，删除，统计，清空，隐藏功能

添加：生成列表结构（v-for+数组）、获取用户输入（v-model）、通过回车新增数据（v-on+.enter）

删除：点击删除指定内容（v-on+splice索引）

统计：统计信息个数（v-text+length）

清空：点击删除所有信息（v-on）

隐藏：没有数据时，隐藏元素（v-show/v-if+数组非空）

<template>

  <div id="app">

    <div id="todolist">

      <input type="text" v-model="inputVal" @keyup.enter="add" />

      <ul>

        <li v-for="(value,index) in list">

          <div>

            <span>{{index+1}}</span>

            <label>{{value}}</label>

            <button @click="del(index)">删除</button>

          </div>

        </li>

      </ul>

      <!-- 隐藏 -->

      <footer v-show="list.length!=0">

        <span>

          <!-- 统计 -->

          <em>{{list.length}}</em>

          list

        </span>

        <!-- 清空 -->

        <button @click="clear" >clear</button>

      </footer>

    </div>

  </div>

</template>

<script>

export default {

  name: "App",

  data: () => {

    return {

      list: ["aaa", "bbb", "ccc"],

      inputVal: ""

    };

  },

  methods: {

    // 添加

    add: function() {

      this.list.push(this.inputVal);

    },

    // 删除

    del:function(index){

      this.list.splice(index,1)

    },

    // 清空

    clear:function(){

      this.list=[]

    }

  }

};

</script>

<style>

#app {

  font-family: "Avenir", Helvetica, Arial, sans-serif;

  -webkit-font-smoothing: antialiased;

  -moz-osx-font-smoothing: grayscale;

  text-align: center;

  color: #2c3e50;

  margin-top: 60px;

}

ul,

li {

  list-style: none;

}

</style>