用vue写一个平铺展示的卡片一样的有叉号有确定有清空

以下是一个使用Vue编写的平铺展示卡片的示例代码：

<template>
  <div>
    <div class="card" v-for="(item, index) in items" :key="index">
      <div class="card-content">
        <span>{{ item }}</span>
        <div class="close-btn" @click="removeItem(index)">×</div>
      </div>
    </div>
    <div class="actions">
      <button @click="clearItems">清空</button>
      <button @click="addItem">确定</button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [], // 存储卡片内容的数组
      newItem: '' // 用于输入新卡片内容的变量
    };
  },
  methods: {
    addItem() {
      if (this.newItem !== '') {
        this.items.push(this.newItem);
        this.newItem = '';
      }
    },
    removeItem(index) {
      this.items.splice(index, 1);
    },
    clearItems() {
      this.items = [];
    }
  }
};
</script>

<style>
.card {
  width: 200px;
  height: 100px;
  background: #ccc;
  margin-bottom: 10px;
}

.card-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
}

.close-btn {
  color: #fff;
  font-weight: bold;
  cursor: pointer;
}

.actions {
  margin-top: 10px;
}

button {
  padding: 6px 12px;
  background-color: #4CAF50;
  color: white;
  border: none;
  cursor: pointer;
  margin-right: 10px;
}
</style>

在上述代码中，使用了Vue的v-for指令来循环渲染卡片列表，并通过v-bind指令绑定了点击事件。点击叉号按钮会调用removeItem方法移除对应的卡片，点击清空按钮会调用clearItems方法清空所有卡片。另外，通过v-model指令将输入框与newItem变量进行绑定，点击确定按钮会调用addItem方法将输入的内容添加到卡片列表中。

上述代码中使用了一些简单的样式来展示卡片和按钮，你可以根据需要进行调整。