JSFiddle - React, Tailwind, and code Playground

by duckduck0054

HTML

<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/[email protected]/lib/index.js"></script>
<div id="appElement">
<ul>
  <li v-for="(car, index) in cars">
    {{car.name}}: {{car.brand}}
  </li>
</ul>
  <div>
    <el-pagination @size-change="eleHandleSizeChange" @current-change="eleHandleCurrentChange" :current-page.sync="currentPage1" :page-sizes="[5, 10, 15, 20]" :page-size="5" layout="total, sizes, prev, pager, next, jumper" :total="length">
    </el-pagination>
  </div>
</div>
<script>
const appEle = new Vue({
  el: '#appElement',
  data: {
  	currentPage1: 1,
    cars: [
    	{ name: '김동현', brand: '게임'},
      { name: '2김동현', brand: '게임'},
      { name: '4김동현', brand: '게임'},
      { name: '5김동현', brand: '게임'},
      { name: '6김동현', brand: '게임'},
      { name: '7김동현', brand: '게임'},
      { name: '8김동현', brand: '게임'},
      { name: '9김동현', brand: '게임'},
      { name: '10김동현', brand: '게임'},
      { name: '11김동현', brand: '게임'},
      { name: '12김동현', brand: '게임'},
      { name: '13김동현', brand: '게임'},
      { name: '14김동현', brand: '게임'},
      { name: '15김동현', brand: '게임'},
      { name: '16김동현', brand: '게임'},
      { name: '17김동현', brand: '게임'},
      { name: '18김동현', brand: '게임'},
      { name: '19김동현', brand: '게임'}
    ],
    car: {
      name: '',
      brand: ''
    },
    carName: '',
    totalCount: 0,
    pageNumber: 0
  },
  props:{},
  computed: {
    length: function () {
    	alert(this.$data.cars.length)
      return this.totalCount = this.cars.length
    }
  },
  methods: 
		{
    	eleHandleSizeChange(val) {
      console.log(`${val} items per page`);
    },
    eleHandleCurrentChange(val) {
      // this.pageNumber = this.currentPage4;
      console.log(`current page: ${val}`);
    }
  }
});
//var Ctor = Vue.extend(appEle)
//new Ctor().$mount('#appElement')
</script>

SCSS

@import url("//unpkg.com/[email protected]/lib/theme-chalk/index.css");