iT邦幫忙

2017 iT 邦幫忙鐵人賽
DAY 8
1

功能抽出(1)

jsfiddle


<html>
<head>
    <meta charset="utf-8">
    <title>功能抽出(1)</title>
</head>
<body>
<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>
</body>
<script src="vue.js"></script>
<script>
    //子區塊
    Vue.component('item-show', {
        props: ['row'],
        template: '<li>{{ row.name }}</li>'
    });
    //主區塊
    new Vue({
        el: '#show',
        data: {
            list: [
                {name: '老鷹'},
                {name: '泰大'},
                {name: '小雨大'},
                {name: '總裁'},
                {name: '賽大'},
                {name: '克拉克'},
                {name: '胖達'}
            ]
        }
    })
</script>
</html>

上一篇
Vue.JS且戰且飛(七)
下一篇
Vue.JS且戰且飛(九)
系列文
Vue.JS且戰且飛30

尚未有邦友留言

立即登入留言