JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/picnicss/6.3.0/picnic.min.css">
<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>

<div id="app">
  <button v-on:click="changeType('TABLE')">표</button>
  <button v-on:click="changeType('CARD')">카드</button>
  <card-wrapper v-if="currentViewType == 'CARD'" v-bind:items="items"></card-wrapper>
  <table-wrapper v-if="currentViewType == 'TABLE'" v-bind:items="items"></table-wrapper> </div>

<template id="card-wrapper">
  <div class="container"> 
    <div class="flex three">
      <div v-for="item in items">
        <article class="card">
          <img class="card-image" v-bind:src="item.cover">
          <footer>
            <h3>{{item.title}}</h3>
          </footer>
        </article>
      </div>
    </div>
  </div>
</template>

<template id="table-wrapper">
  <table class="primary table">
    <thead class="thead">
      <th>작성자</th>
      <th>제목</th>
      <th>커버이미지</th>
    </thead>
    <tbody>
      <tr v-for="item in items">
        <td>{{item.author}}</td>
        <td>{{item.title}}</td>
        <td>{{item.cover}}</td>
      </tr>
    </tbody>
  </table>
</template>

CSS

.container {
  margin: 0 auto;
  width: 960px;
}
.card-image {
  width: 100%;
}

.table {
  width: 100%;
}

JavaScript

Vue.component('card-wrapper',{
	template: '#card-wrapper',
	props: ['items']
});

Vue.component('table-wrapper',{
	template: '#table-wrapper',
	props: ['items']
});

new Vue({
	el: '#app',
  mounted: function () {
  },
  data: function () {
  	return {
      currentViewType: 'TABLE',
      items: [
      	{ author: 'Writer A', title: 'lorem ipsum', cover: 'http://lorempicsum.com/futurama/400/400/5'},
      	{ author: 'Writer B', title: 'lorem ipsum', cover: 'http://lorempicsum.com/futurama/400/400/1'},
      	{ author: 'Writer C', title: 'lorem ipsum', cover: 'http://lorempicsum.com/futurama/400/400/2'},
      	{ author: 'Writer D', title: 'lorem ipsum', cover: 'http://lorempicsum.com/futurama/400/400/3'},
      	{ author: 'Writer E', title: 'lorem ipsum', cover: 'http://lorempicsum.com/futurama/400/400/4'}
      ]
    }
  },
  methods: {
  	changeType: function(type) {
    	this.currentViewType = type
		}
  }
})