创建组件

Vue.component('v-app', {
  props: ['item'],
  template: `
		<div class="show-modal">
			<h1>Item-Post</h1>
			{{ item.userId }} <br>
			{{ item.id }} <br>
			{{ item.title }} <br>
			{{ item.body }} <br>
      <button @click="$emit('close')">Close</button>
		</div>
		`
});
let semple = new Vue({
  el: '#app',
  data: {
    userId: '',
    id: '',
    title: '',
    body: '',
    posts: null,

    item: '',
    itemPost: false
  },
  methods: {
    Puslished() {
      this.posts.push({
        userId: this.userId,
        id: this.id,
        title: this.title,
        body: this.body
      });
    },
    clickBookModal(i) {
      this.itemPost = true;
      this.item = this.posts[i]
    },
    closeBookModal() {
      this.itemPost = false;
      this.item = null;
    },
    DeleteItemPost(i) {
      this.posts.splice(i, 1);
    }
  },
  mounted() {
    axios.get('https://jsonplaceholder.typicode.com/posts')
      .then(response => this.posts = response.data);
  }
})

.post-wrapper ul {
  margin: 5px;
  width: 120px;
  border: 2px solid orange;
}
.post-wrapper ul:hover {
  border-color: black;
  cursor: pointer;
}

.post-wrapper {
  display: flex;
  flex-wrap: wrap;
}

.show-modal {
  width: 100%;
  position: fixed;
  top: 0;
  background: white;
  height: 100%;
  left: 0;
}

<div id="app">

  <input type="text" placeholder="userId" v-model="userId">
  <input type="text" placeholder="id" v-model="id">
  <input type="text" placeholder="title" v-model="title">
  <input type="text" placeholder="body" v-model="body">
  <div v-show="userId"><b>UserId</b> -{{ userId }}</div>
  <div v-show="id"><b>Id</b> -{{ id }}</div>
  <div v-show="title"><b>Title</b> -{{ title }}</div>
  <div v-show="body"><b>Body</b> -{{ body }}</div>

  <button @click="Puslished">Push in Posts</button>


  <!-- SHOW ON CLICK ITEM -->
  <v-app :item="item" v-show="itemPost" @close="closeBookModal"></v-app>

  <!-- show -->

  <div class="post-wrapper">
    <ul v-for="(post, i) in posts" class="box" @click="clickBookModal(i)">
      <li v-html="post.userId" class="user-id"></li>
      <li v-html="post.id" class="post-id"></li>
      <li v-html="post.title" class="post-title"></li>
      <li v-html="post.body" class="post-body"></li>
      <button @click.stop="DeleteItemPost(i)">Delete!</button>
    </ul>
  </div>
</div>


<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>