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'
				});
			}
		});@H_403_3@ 
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"}
			] 
			
		}
	]
}@H_403_3@ 
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>@H_403_3@ 原文链接：https://www.f2er.com/ajax/161153.html