页面整体框架实现，实现小功能，循环出数据,整体代码是上一篇
vue+node.js+webpack开发微信公众号功能填坑——组件按需引入
修改部门代码
app.vue
<yd-flexbox>
<yd-flexbox-item>能耗排行</yd-flexbox-item>
<yd-flexbox-item>房间号</yd-flexbox-item>
<yd-flexbox-item>能耗程度</yd-flexbox-item>
</yd-flexbox>
<div id="data">
<yd-flexbox v-for="item in database":key="item.rank">
<yd-flexbox-item>{{item.rank}}</yd-flexbox-item>
<yd-flexbox-item>{{item.rid}}</yd-flexbox-item>
<yd-flexbox-item>{{item.energy}}</yd-flexbox-item>
</yd-flexbox>
</div>
/**
注意: v-for循环list时，要指明key,不然会报错信息
官方文档地址 https://cn.vuejs.org/v2/guide/list.html
*/
<script>
export default {
name: 'Powerrank',
data(){
return{
database:[
{
rank:1,
rid:123,
energy:6
},
{
rank:2,
rid:123,
energy:6
},
{
rank:3,
rid:123,
energy:6
}
],
value:''
}
}
}
</script>
效果图