JSFiddle - React, Tailwind, and code Playground

by eagle sum

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.3/vue.js"></script>
<div id="show">
    <ol>
    <!--    for把row傳入子區塊,詳細樣式為 template: '<li>{{ row.name }}</li>'  -->
        <item-show v-for="row in list" v-bind:row="row"></item-show>
    </ol>
</div>

JavaScript

//子區塊
    Vue.component('item-show', {
        props: ['row'],
        template: '<li>{{ row.name }}</li>'
    });
    //主區塊
    new Vue({
        el: '#show',
        data: {
            list: [
                {name: '老鷹'},
                {name: '泰大'},
                {name: '小雨大'},
                {name: '總裁'},
                {name: '賽大'},
                {name: '克拉克'},
                {name: '胖達'}
            ]
        }
    })