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>

效果图

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

上一篇:使用vue开发微信公众号下SPA站点的填坑之旅


下一篇:集群下session共享问题的解决方案.