vue单击按钮删除信息，请详细给出代码

当点击按钮时，可以通过调用一个函数来实现删除信息的功能。假设你的Vue组件中有一个包含信息的数组，数组中的每个元素都有一个唯一的ID。你可以在模板中使用v-for指令来循环渲染这些信息，并为每个元素添加一个按钮来删除它。

以下是一个示例代码：

<template>
  <div>
    <ul>
      <li v-for="info in infos" :key="info.id">
        {{ info.text }}
        <button @click="deleteInfo(info.id)">删除</button>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      infos: [
        { id: 1, text: '信息1' },
        { id: 2, text: '信息2' },
        { id: 3, text: '信息3' }
      ]
    }
  },
  methods: {
    deleteInfo(id) {
      // 通过ID删除信息
      this.infos = this.infos.filter(info => info.id !== id)
    }
  }
}
</script>

在上面的代码中，我们使用v-for指令来循环渲染数组中的每个元素，并为每个元素添加一个按钮来删除它。当点击删除按钮时，我们调用deleteInfo函数，并将其传递给要删除的信息的ID作为参数。在deleteInfo函数中，我们使用Array.filter方法来过滤掉要删除的信息，并更新组件的数据。