vue实现留言板功能

<template>

    <div>
  
      <h1>留言板</h1>
  
      <textarea v-model="message" placeholder="请输入留言"></textarea>
  
      <button @click="addMessage()">提交</button>
  
      <div v-for="(msg, index) in messages" :key="index">
  
        <p>{{ msg }}</p>
  
      </div>
  
    </div>
  
  </template>
  
  
  
  <script>
  
  export default {
  
    data() {
  
      return {
  
        message: '',
  
        messages: []
  
      }
  
    },
  
    methods: {
  
      addMessage() {
  
        if (this.message.trim() !== '') {
  
          this.messages.push(this.message);
  
          this.message = '';
  
        }
  
      }
  
    }
  
  }
  
  </script>