创建数据
var artcles = {
artcles: [
{
name: '热文推荐1',
'date': '2018-08-08 00:00:00',
'content': 'xxxxxxxxxxxxx1',
'href': 'xx',
'img': 'static/index/themes/images/youtube.png'
},
{
name: '热文推荐2',
'date': '2018-08-08 00:00:00',
'content': 'xxxxxxxxxxxxx2',
'href': 'xx',
'img': 'static/index/themes/images/youtube.png'
},
{
name: '热文推荐3',
'date': '2018-08-08 00:00:00',
'content': 'xxxxxxxxxxxxx3',
'href': 'xx',
'img': 'static/index/themes/images/youtube.png'
},
{
name: '热文推荐4',
'date': '2018-08-08 00:00:00',
'content': 'xxxxxxxxxxxxx3',
'href': 'xx',
'img': 'static/index/themes/images/youtube.png'
}
]
};
新建vue对象
var artcle = new Vue({
el: '#artcle',
data: artcles
});
绑定至对应模块
<div class="span9" id="artcle">
<h4>实时推荐:</h4>
<div class="row" v-for="artcle in artcles">
<div class="span2">
<img v-bind:src="artcle.img" alt="">
</div>
<div class="span7">
<h3> {{artcle.name}}</h3>
<hr class="soft">
<h5>{{artcle.date}} </h5>
<a class="btn btn-small pull-right"
v-bind:href="artcle.href">查看详情</a>
<p>{{artcle.content}} </p>
<br class="clr">
</div>
</div>