记事本

记事本：

功能：添加任务，可以删除，清空，根据内容进行统计个数，底部元素在没有任何元素的时候慧进行隐藏

 

思路：

列表结构可以通过v-for指令结合数据生成

v-on结合事件修饰符可以对事件进行限制，比如.enter

v-on在绑定事件时可以传递自定义参数

通过v-model可以快速的设置表单元素的值

基于数据开发方式

 

代码：

<template>
  <div>
    <el-card>
      <div>
        <h2>金龙记事本</h2>
        <input placeholder="请输入内容" v-model="inputVale" @keyup.enter="add" />
      </div>
      <div>
        <table v-if="list.length !=0">
          <thead>
            <tr>
              <td>姓名</td>
              <td>年龄</td>
              <td>性别</td>
            </tr>
          </thead>
          <tbody>
            <tr v-for="(item,index) in list" :key="index">
              <td>{{index+1}}</td>
              <td>{{item}}</td>
              <el-button size="mini" type="danger" @click="remove(index)">删除</el-button>
            </tr>
          </tbody>
        </table>
      </div>
    </el-card>
    <footer>
      <span>总计：{{list.length}}</span>
      <button @click="clear">clear</button>
    </footer>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: ["xiezuoye", "ddf"],
      inputVale: ""
    };
  },
  methods: {
    add(value) {
      this.list.push(this.inputVale);
      this.inputVale = "";
    },
    remove(index) {
      this.list.splice(index, 1);
    },
    clear() {
      this.list = [];
    }
  }
};
</script>
<style scoped>
</style>