用vue写一个1.添加任务有，空格无法添加，回车能快添加任务2.删除任务3.合计与清空任务，任务为0时，此栏隐藏

在Vue.js中实现这样的功能，你可以创建一个简单的表格组件，结合v-model指令、事件监听以及条件渲染。首先，你需要设置数据结构来存储任务，然后编写相应的HTML模板、Vue实例和事件处理。

1. HTML模板 (template.vue):

<template>
  <div>
    <input type="text" v-model="taskInput" @keyup.enter="addTask" @keyup.space.prevent/>
    <button @click="addTask">添加任务</button>

    <ul>
      <li v-for="(task, index) in tasks" :key="index">
        {{ task }}
        <button @click="deleteTask(index)">删除</button>
      </li>
    </ul>

    <p v-if="tasks.length === 0">任务总计: 0</p>
    <button @click="clearTasks" v-if="tasks.length > 0">清空任务</button>
  </div>
</template>

2. Vue实例 (script.vue):

<script>
export default {
  data() {
    return {
      taskInput: '',
      tasks: [],
    };
  },
  methods: {
    addTask(e) {
      if (!this.taskInput.trim()) return;
      this.tasks.push(this.taskInput);
      this.taskInput = '';
    },
    deleteTask(index) {
      this.tasks.splice(index, 1);
    },
    clearTasks() {
      this.tasks = [];
    },
  },
};
</script>

在这个例子中，当用户按下空格键时，`@keyup.space.prevent`会阻止默认的行为（例如跳到下一行），而当按下回车键时，`@keyup.enter`触发`addTask`方法。删除任务和清空任务分别通过点击按钮完成。