data博文数组.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vue Button Counter Example</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
  </head>
  <body>
    <div id="demo">

    <blog-post
    v-for="post in posts"
    v-bind:key="post.id"
    v-bind:title="post.title"
    >
    </blog-post>
    </div>


    </div>
  
    <script>
      // 定义一个名为 button-counter 的新组件
      Vue.component("blog-post", {
        props:['title'],
        template:
          '<h2>{{title}}</h2>',
      });

      // 创建一个 Vue 根实例，用于挂载包含组件的元素
      new Vue({
        el: '#demo',
    data: {
      posts: [
      { id: 1, title: 'My journey with Vue' },
      { id: 2, title: 'Blogging with Vue' },
      { id: 3, title: 'Why Vue is so fun' }
    ]
  }
      });
    </script>
  </body>
</html>