element-ui + vue 简易留言板

好的，我可以为您提供一个简单的留言板示例，使用Vue和Element UI实现。

首先，您需要安装Vue和Element UI：

npm install vue element-ui

然后，创建一个Vue实例，引入Element UI和样式：

<template>
  <div>
    <el-input v-model="input" placeholder="请输入留言内容"></el-input>
    <el-button @click="addMessage">提交</el-button>
    <el-divider></el-divider>
    <el-card v-for="(message, index) in messages" :key="index">
      <div slot="header" class="clearfix">
        <span>留言 {{ index + 1 }}</span>
        <el-button style="float: right;" type="text" @click="deleteMessage(index)">删除</el-button>
      </div>
      <p>{{ message }}</p>
    </el-card>
  </div>
</template>

<script>
import { ElInput, ElButton, ElDivider, ElCard } from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

export default {
  name: 'MessageBoard',
  components: {
    ElInput,
    ElButton,
    ElDivider,
    ElCard
  },
  data() {
    return {
      input: '',
      messages: []
    }
  },
  methods: {
    addMessage() {
      if (this.input) {
        this.messages.push(this.input)
        this.input = ''
      }
    },
    deleteMessage(index) {
      this.messages.splice(index, 1)
    }
  }
}
</script>

在这个示例中，我们使用了`ElInput`组件和`ElButton`组件来获取用户输入和提交留言，使用`ElDivider`组件来分割线，使用`ElCard`组件来显示留言内容。同时，我们使用了`v-for`指令来循环展示留言列表。

在`data`中，我们定义了`input`和`messages`变量，用于存储用户输入和留言列表。在`methods`中，我们定义了`addMessage`方法和`deleteMessage`方法，用于添加留言和删除留言。

最后，我们将组件导出，并在需要使用留言板的地方引入即可。

希望这个示例能够帮助到您！