功能抽出(1)
<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>
iThome鐵人賽
看影片追技術