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>

 

效果圖