vue v-for詳解

1.Vue動態渲染列表------v-for用法詳解：

Html：

<figure v-for="list in lists">

    <div>

    <a v-bind:href=" list.big">

       <img v-bind:src="list.small">

    </a>

</div>

</figure>

<template v-for="item in items">

    <li>{{ item.msg }}</li>

    <li class="divider"></li>

  </template>

 

渲染在頁面上的樣式： < figure >...</ figure >

< figure >...</ figure >

< figure >...</ figure >

用法：

1. 想動態增長那個元素就在其上加 ：

v-for=‘[自定義名字] in [json中數組名字]’

1. 綁定在html中的數據用 ：

（1）元素內部的屬性用v-bind：[屬性] = ‘[自定義名字].json數組中的屬性’

（2）標籤內容引用 {{ [自定義名字].json數組中的屬性 }}

JS-vue-ajax：

var vm = new Vue({

    el:'#main',

    data:{

        lists : '',

        honors:''

    },

    methods:{

        listMessage: function () {

            var _self = this;

            $.ajax({

                type: 'GET',

                url: 'js/json/photolist.json',

                success:function(data) {

                    _self.lists = data.lists;

                }

            });

        },

        listMessageTwo: function () {

            var _self = this;

            $.ajax({

                type: 'GET',

                url: 'js/json/photolist.json',

                success:function(data) {

                    _self.honors = data.honors;

                }

            });

        }

    },

    ready:function(){

        var _this =this;

        _this.listMessage();

        _this.listMessageTwo();

    }

})

用法：

1. data中定義要用的到的 [json中數組名字]

data:{

    lists : '',

    honors:''

}

json中：

{{

  "lists": [

    {

      "big": "images/photo-end.jpg",

      "small":"images/photo2.jpg"

    }  ],

  "honors":[

    {

      "big": "images/photo-end.jpg",

      "small":"images/photo.png"

    }

  ]

}

 

1. 在methods中定義一個函數，經過ajax獲取數據

success:function(data) {

    _self.lists = data.lists;

}

 

成功獲取數據後，將 json中的數組名賦值給 data中的數組名，在經過html中v-for的引用，將json數組中的數據傳值到html中

 

注意：

  methods方法中的函數須要調用才能執行，若是頁面是在已進入就執行後臺數據渲染的，須要在methods方法下添加 ready函數，並在其中引用ajax函數

ready:function(){

    var _this =this;

    _this.listMessage();

    _this.listMessageTwo();

索引用法：

<li v-on:click="typeNavClick($event,$index)" v-for="(index,main) in mainList"