vue留言板实现点赞删除功能

Vue留言板实现点赞和删除功能可以通过以下步骤来实现：

1. 创建留言板组件：首先，创建一个留言板组件，用于展示留言列表和操作按钮。

2. 数据绑定：使用Vue的数据绑定功能，将留言列表数据绑定到组件的data属性上。

3. 渲染留言列表：使用v-for指令，遍历留言列表数据，并将每条留言渲染到页面上。

4. 实现点赞功能：为每条留言添加一个点赞按钮，并绑定一个点击事件。在点击事件中，可以通过修改对应留言的点赞数属性来实现点赞功能。

5. 实现删除功能：为每条留言添加一个删除按钮，并绑定一个点击事件。在点击事件中，可以通过从留言列表中移除对应的留言对象来实现删除功能。

下面是一个简单的示例代码：

<template>
  <div>
    <ul>
      <li v-for="(message, index) in messages" :key="index">
        {{ message.content }}
        <button @click="like(index)">点赞({{ message.likes }})</button>
        <button @click="deleteMessage(index)">删除</button>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      messages: [
        { content: '留言1', likes: 0 },
        { content: '留言2', likes: 0 },
        { content: '留言3', likes: 0 }
      ]
    };
  },
  methods: {
    like(index) {
      this.messages[index].likes++;
    },
    deleteMessage(index) {
      this.messages.splice(index, 1);
    }
  }
};
</script>