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:'数据加载成功'}]},
          {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测试实时接口数据。