vue框架下公告信息小程序代码

以下是一个简单的公告信息小程序的Vue代码：

template:

<div class="container">
  <h1>{{ title }}</h1>
  <ul>
    <li v-for="notice in notices" :key="notice.id">
      <h3>{{ notice.title }}</h3>
      <p>{{ notice.content }}</p>
      <p>{{ notice.date }}</p>
    </li>
  </ul>
</div>

script:

export default {
  data() {
    return {
      title: '公告信息',
      notices: [
        {
          id: 1,
          title: '关于国庆节放假的通知',
          content: '国庆节期间公司放假7天，10月1日至10月7日，10月8日正常上班。',
          date: '2021-09-01'
        },
        {
          id: 2,
          title: '公司年会通知',
          content: '公司年会将于12月25日晚在XX宾馆举行，请各位员工准时参加。',
          date: '2021-11-01'
        },
        {
          id: 3,
          title: '关于劳动节加班的通知',
          content: '劳动节期间公司需要加班，具体加班时间请各部门负责人安排。',
          date: '2021-04-01'
        }
      ]
    }
  }
}

在这个小程序中，我们使用了Vue的模板语法来渲染公告信息列表，使用了v-for指令来遍历notices数组中的每一个公告信息，并使用:key来指定每个公告信息的唯一标识符。我们还使用了Vue的数据绑定来动态显示公告信息的标题、内容和日期