js
$.ajax({
type : "GET",url : "foucslists.json",dataType : "json",success : function (data){
var foucslists = data["classify"];
//vue
var drawFocusLists = new Vue({
el : "#focus-list",data : {
todos : foucslists
}
});
//zui popover
$('[data-toggle="popover"]').popover({
trigger : 'hover',placement : 'top'
});
}
});
json
{
"name" : "foucs","classify":[
{
"title" : "设计","content":[
{"siteName" : "UI-Cloud","itemTitle" : "UI-Cloud","itemContent" : "UI搜索引擎，设计师必备，提供用户界面PSD下载","link" : "http://ui-cloud.com/"},{"siteName" : "优设网","itemTitle" : "高大上","itemContent" : "高大上的内容","link" : "http://www.uisdc.com/"},"link" : "http://www.uisdc.com/"}
]
},{
"title" : "前端","content":[
{"siteName" : "前端1","link" : "www.baidu.com"},{"siteName" : "前端2",{"siteName" : "前端3",{"siteName" : "前端4","link" : "www.baidu.com"}
]
}
]
}
HTML
<div class="page-content">
<div id="focus">
<!--focus list s-->
<ul id="focus-list" class="">
<li v-for="todo in todos" class="">
<div class=" panel panel-info">
<div v-cloak class="panel-heading">
{{ todo.title }}
</div>
<div class="panel-body">
<div class="item" v-for="list in todo.content">
<a v-cloak :title="list.itemTitle" :href="list.link" data-toggle="popover" data-tip-class="popover-warning" :data-content="list.itemContent">{{ list.siteName }}</a>
</div>
</div>
</div>
</li>
</ul>
<!--focus list e-->
</div>
</div>