vue+node.js+webpack开发微信公众号功能填坑——v -for循环

页面整体框架实现，实现小功能，循环出数据,整体代码是上一篇

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>

效果图