vuev-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": [
{
vue json字符串转数组
"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"

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。