用vue.js去循环遍历接口数据

// HTML举例

 <div class="tab-pane fade in active" id="tab3" >																	
		<a :href="gethref(msg.id)">			
			<div class="supply" >							
				<div class="supply_img"><img :src=Url+msg.pic alt="msg"/></div>					
					<ul>
						<li class="title">{{msg.title}}</li>
						<li class="text">{{msg.desc}}</li>
						<li class="address">
							<span class="addr">{{msg.address}}</span> 
							<span class="time" style="width: 65px;">{{msg.addtime}}</span>
						</li>
					</ul>											
			</div>
		</a>
	</div>
 // 引入3个js文件
<script src="js/jquery-2.2.4.js" type="text/javascript" charset="utf-8"></script>
<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
<script src="https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.min.js"></script>
<script type="text/javascript">
$(function(){
	//定义一个可变路径的变量去接收接口，以便后期更改
	var AbUrl = "http://q.coolndns.com/";
	//信息详情
	var vm = new Vue({
		el: '.mui-content',
		data: {
			msg: [],  //msg 可为数组或对象;
			Url:AbUrl+"uploads/"		//图片拼接路径		
		},
		mounted: function() {
			this.get();
			this.gethref();
			//this.returnId();
		},
		methods: {
			get: function() {
				var urls = location.href;
				var i = urls.split("=");
				var ids = i[1]; //获取动态id
				//console.log(ids)
				this.$http.get(AbUrl+"list/getsupply/?id="+ids, { //index/recsupply
					emulateJSON: true
				}).then(function(res) {
					var data = res.data;	
					//console.log(data)
					var List =data.data;
					this.msg =List;
				}, function() {
					console.log('请求失败处理');
				});
			},
			//向详情页传id参数
			gethref:function(msg){
				//console.log(msg)
				return 'supply_info_text.html?id='+msg
				
			}

		}
	});

})
</script>