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"