vue写记事本，主要功能添加任务、空格无法添加，回车可以添加任务2、删除任务、3合计与清空任务，任务为0时，此栏隐藏

在 Vue 中创建一个简单的记事本应用，我们可以使用组件化思想来构建各个功能模块，如任务列表、添加任务、删除任务等。以下是一个简化的步骤描述：

1. **初始化项目**：
首先，在 Vue CLI 环境下创建一个新的项目，安装必要的依赖，比如 Element UI 提供丰富的 UI 组件。

vue create your-project
cd your-project
npm install element-ui --save

2. **设计数据模型**：
创建一个 `Task` 对象，包含标题、状态等属性，并在 Vue 的 `data` 函数中定义一个任务数组。

export default {
  data() {
    return {
      tasks: [],
    };
  },
};

3. **任务列表组件**：
使用 `v-for` 指令遍历任务数组渲染任务项，设置事件监听器处理添加和删除操作。

<template>
  <el-row v-for="(task, index) in tasks" :key="index">
    <el-col :span="18">
      <div>{{ task.title }}</div>
      <!-- 添加删除按钮 -->
      <el-button @click="handleRemove(index)">删除</el-button>
    </el-col>
    <el-col :span="6">
      <!-- 根据任务数显示/隐藏总计行 -->
      <div v-if="tasks.length">总计：{{ tasks.length }}</div>
      <!-- 清空按钮 -->
      <el-button @click="handleClear">清空</el-button>
    </el-col>
  </el-row>
</template>

<script>
...
methods: {
  handleRemove(index) {
    this.tasks.splice(index, 1);
  },
  handleClear() {
    this.tasks = [];
  },
},
// 其他生命周期钩子和样式等
</script>

4. **添加任务**：
用户输入内容，监听 `keyup` 事件，当按下空格键时不做任何操作，按回车则添加新的任务到数组。

<template>
  <input type="text" v-model="newTask" @keyup.enter="addTask">
</template>

<script>
...
methods: {
  addTask() {
    if (this.newTask.trim()) {
      this.tasks.push({ title: this.newTask });
      this.newTask = '';
    }
  },
},
...
</script>

5. **条件渲染**：
利用 Vue 的 `v-show` 或 `v-if` 来控制总计行的隐藏和显示，当任务长度为0时，展示隐藏。

<template>
  <!-- ... -->
  <div v-if="tasks.length > 0">总计：{{ tasks.length }}</div>
</template>

现在，你就有了一个基本的记事本应用，用户可以添加任务并根据任务数量动态显示总计和清除按钮。注意这只是一个简化的示例，实际应用可能需要更多的错误处理和用户体验优化。如果你有更多问题，可以继续提问：