// 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>