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>

 

效果图

 

 

 

转载于:https://www.cnblogs.com/Cassie-wang/p/8968005.html