用vue.js去循环遍历接口数据
// HTML举例<div class="tab-pane fade in active" id="tab3" ><a :href="gethref(msg.id)"><div class="supply" ><div class="supply_img"><im...
·
// 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>
更多推荐
已为社区贡献1条内容
所有评论(0)