vue中如何双循环(v-for)获取data中的值
双层循环获取data中的值 在写demo的时候,需要打印日志,而后台的接口数据是多个包含键值对的数组如:{items:[{today:'2018-12-24',time:'20:41:12',text:'数据加载中'}]},{items:[{today:'2018-12-24',time:'20:41:12',text:'数据加载成功'}]},...
·
双层循环获取data中的值
在写demo的时候,需要打印日志,而后台的接口数据是多个包含键值对的数组如:
{items:[{today:'2018-12-24',time:'20:41:12',text:'数据加载中'}]},
{items:[{today:'2018-12-24',time:'20:41:12',text:'数据加载成功'}]},
{items:[{today:'2018-12-24',time:'20:41:26',text:'数据加载失败'}]}
在使用vue开发页面后,就不想使用传统的从接口获取数据后,通过for循环获取每个值得数据,那么vue中是否可以简化此步骤?答案是肯定有的,vue中可通过v-for获取data中的数据,data中的数据可以通过后台接口传递,进而使整个数据加载渲染比较清晰。
我们先通过假数据观察v-for数据获取结果:
<div class="operationLog">
<label style="color:#a0a4ac;font-size:13px;font-family: MicrosoftYaHei;">运行日志</label>
</div>
<div class="logList">
<ol>
<li v-for="logData in logList" style="margin-top:12px;">
<img style="margin-left:4px;" src="../../static/shijian.png" />
<span v-for="log in logData.items">{{ log.today}}</span>
<span v-for="log in logData.items">{{ log.time}}</span>
<span v-for="log in logData.items">{{ log.text}}</span>
</li>
</ol>
</div>
data数据
data():{
return {
logList: [
{items:[{today:'2018-12-24',time:'20:41:12',text:'数据加载中'}]},
{items:[{today:'2018-12-24',time:'20:41:12',text:'数据加载成功'}]},
{items:[{today:'2018-12-24',time:'20:41:26',text:'数据加载失败'}]},
{items:[{today:'2018-12-24',time:'20:42:24',text:'数据加载成功'}]},
]
}
}
结果:
在使用接口数据时,只需在方法中通过接口将获得值赋值给logList即可如:url代表接口地址、params代表get请求参数
search:function(){
this.axios.get("url", {
params: {
a: " a1",
b: " b1",
}
})
.then(function (response) {
if (response.data.code == 0) {
var msg = response.data.msg;
this.logList= msg;
}
})
}
上述msg要和data中logList的数值类型要相同才可以,下图为demo测试实时接口数据。
更多推荐
已为社区贡献14条内容
所有评论(0)