vue数据列表渲染

vue数据渲染

第一步：获取数据

methods: {
		async getFaultList() {
			const falutlist = await getFaultList({ whe: '' }); //后面是根据要求穿的字段
			this.falutlistInfo = falutlist.lst;   //data里面创建的对象要加上this.
					},
	}

第二步：执行函数

created() {
		this.getFaultList();
},

第三部：在data创建一个对象放获取到的数据

data() {
		return {
					falutlistInfo: []	// 故障列表
		};
	},

第四部：渲染在html上面

<flexbox :gutter="15" v-for="(item, key, i) in falutlistInfo" v-bind:key="item.id">
				<flexbox-item :span="1 / 9">
					<div class="iconbox"><svg-icon icon-class="arrow-warn" style="display:block;color: #E64240;" /></div>
				</flexbox-item>
				<flexbox-item>
					<div class="boxContent">
						<div>
							<span class="TitleFont">区域名称</span>
							： {{ item.tag }}
						</div>
						<div>
							<span class="TitleFont">点位IP</span>
							： {{ item.ip }}
						</div>
						<div>
							<span class="TitleFont">挂箱号</span>
							： {{ item.boxid }}
						</div>
						<div>
							<span class="TitleFont">点位名称</span>
							： {{ item.tag }}
						</div>
				
					</div>
				</flexbox-item>
			</flexbox>