Firstly, write a static template components
<div id = "app">
<my-arti></my-arti>
</div>
<script>
Vue.component('my-arti',{
template:
'<div style="border:1px solid black">'+
'<span>date:2019年06月14日</span><br>'+
'<span>count:3</span>'+
'</div>'
});
let vm = new Vue({
el:'#app',
});
</script>
Date and count the above properties are varied
can be used props, to turn it into dynamic.
<div id = "app">
<my-arti :detail='article'></my-arti>
</div>
<script>
Vue.component('my-arti',{
props:['detail'],
template:
'<div style="border:1px solid black">'+
'<span>date:' + detail.date +'<span><br>'+
'<span>count:' + detail.count + 'span>'+
'</div>'
});
let vm = new Vue({
el:'#app‘，
data:{
article:{
date:'2019年06月14日',
count:'3',
}
}
});
</script>
// 通过:detail="article",将article传入到组件my-arti中
Written template, the template below multiplexing.
<div id="app">
<my-arti
v-for ="item in articles"
:details="item">
</my-arti>
</div>
<script>
Vue.component('my-arti',{
props:['details'],
template:
'<div style="border: 1px solid black;margin-bottom:5px;">'+
'<span>Date:{{details.date}}</span>'+
'<span>Count:{{details.count}}</span>'+
'</div>'
})
let vm = new Vue({
el:'#app',
data:{
articles:[
{
date:'2019年06月14日',
count:'3'
},
{
date:'2019年06月13日',
count:'0',
},
{
date:'2019年06月12日',
count:'1',
}
]
}
});
</script>
