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"