想要实现的效果:
在数据表格里边每一天的数据旁边点“展开”后,底下展开当天的数据明细(每个详细页面的具体访问量)。
html:
<table id="h_site_dataTable">
<tr>
<th>日期</th><th>PV</th><th>UV</th><th>展开明细</th>
</tr>
<tr v-for="item in data>
<td>{{item.date}}</td>
<td>{{item.pv}}</td>
<td>{{item.uv}}</td>
<td v-on:click="detail(item.date)">展开</td>
<tr>
</table>
script:
$.getJSON('/api/getAll?platform=h', function(d) {
var dataTable = new Vue({
el: '#h_site_dataTable',
data: d,
methods: {
detail:function(date){
//再次ajax请求当天的明细数据然后在这里边渲染?
}
}
})
});
在vue实例里边执行方法再次渲染一个列表出来吗?
应该先实例化vue再ajax获取数据 赋值给vue实例里的某个data 再次请求的方法写在vue实例中 这样才可以往已经有数据的变量中继续push加载到的新数据 而不是一次拉取就实例化一次
渲染数据与data里值绑定。多去官网研究下教程http://cn.vuejs.org/
一看你就没有掌握vue.js 的精髓啊。 vuejs视图和内存里的值是绑定的,也就是你只要想办法改变js变量里的值,页面就会跟着实时变化
我给举个我用过的 页面访问人数, 实时刷新的例子
js
var vm = new Vue({
el : '#app',
data : {nlist:{'num':0,'click':0}}
})
function getdata(){
$.post('', {token: '633de4b0c14ca52ea2432a3c8a5c4c31'}, function(data) {
vm.nlist.num=data.num;
});
setTimeout(getdata,2000);
}
getdata();