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 >
用法：
- 想动态增加那个元素就在其上加 ：
v-for=‘[自定义名字] in [json中数组名字]’
- 绑定在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();
}
})
用法：
- 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"
}
]
}
- 在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"