6、vue之v-for循环数组

vue之v-for循环

页面

<div class="content_statistics">
	 <div class="content_statistics_text" v-for="(p, index) in person" :key="index">
	   {{p.date}}：24#
	   {{p.num}}位长者完成
	   {{p.thing}}；
	   {{p.name}}
	   {{index+1}}
	   <span v-for="(c,cIndex) in p.color" :key="cIndex">
	     {{c}}
	     {{index+1}}.{{cIndex+1}}
	   </span>
	 </div>
 </div>

script数据

data () {
    return {
		person: [
		        {
		          date: '2022-06-20 10:19',
		          name: '杰克',
		          num: '102',
		          thing: '血压测量',
		          color: ['green', 'yellow']
		        },
		        {
		          date: '2022-06-22 10:23',
		          name: '罗斯',
		          num: '103',
		          thing: '数据服务',
		          color: ['red', 'blue']
		        },
		        {
		          date: '2022-07-20 08:19',
		          name: '迈克',
		          num: '104',
		          thing: '血糖测量',
		          color: ['yellow', 'pink']
		        },
		        {
		          date: '2022-07-11 14:19',
		          name: '迈克',
		          num: '105',
		          thing: '体温测量',
		          color: ['yellow', 'pink']
		        }
		 ]
	}
}

CSS（less）

<style lang="less">
.content_statistics {
  width: 250px;
  // height: 200px;
  border-radius: 8px;
  display: inline-block;
  /* middle   把此元素放置在父元素的中部。 */
  vertical-align: middle;
  box-shadow: inset 0 0 0 1px #d6d6d6;
  text-align: left;
  padding: 5px 15px;
  font-size: 15px;
  .content_statistics_text {
    padding-bottom: 5px;
  }
}
</style>

页面效果