前言:
在Angular2中列表渲染使用循环指令*ngFor,在vue中则用v-for实现列表渲染,究竟如何使用呢?请听小编娓娓道来。
正文:
1.全部代码展示:
<template>
<div>
<ul>
<li v-for="(value, index) in objList" :key="value.name">{{ index + '-' + value}}
</li>
</ul>
</div>
</template>
<script>
export default {
data () {
return {
list: [
{
id: 1,
name: 'apple',
price: 38
},
{
id: 2,
name: 'banana',
price: 79
}
],
objList: {
name: 'apple',
price: 24,
color: 'red',
weight: 14
}
}
}
}
</script>
<style>
html {
height: 100%;
}
</style>
分解说明:
1.从后端接收的数据为数组:
data () {
return {
list: [
{
id: 1,
name: 'apple',
price: 38
},
{
id: 2,
name: 'banana',
price: 79
}
]
2.用v-for渲染列表:
<template>
<div>
<ul>
<li v-for="item in list" :key="item.id">{{ item.name }}-{{ item.price }}
</li>
</ul>
</div>
</template>
注:
(1)vue中列表循环的是当前标签,而并非父级。如果拿上述代码中,即为v-for写在li标签中,而并非ul标签或者div标签中。在Angular2中,*ngFor循环指令是在父级,插值绑定在当前标签。如果用Angular实现的话,上述代码应该是:
<div *ngFor="let item of data;let i = index">
<ul>
<li>{{ item.name }}-{{ item.price }}
</li>
</ul>
</div>
(2)vue从2.0++版本,使用v-for进行列表渲染时,必须有key:
<li v-for="item in list" :key="item.id">{{ item.name }}-{{ item.price }}
(3)v-for可以接受对象进行渲染:
<1>如后端返回数据为一个对象,即为:
data () {
return {
objList: {
name: 'apple',
price: 24,
color: 'red',
weight: 14
}
}
}
<2>用v-for渲染列表为:
<template>
<div>
<ul>
<li v-for="(value, index) in objList" :key="value.name">{{ index + '-' + value}}
</li>
</ul>
</div>
</template>
注:如果后端返回数据为一个对象,在使用v-for进行 列表渲染时,value是对象的属性值,index是对象的属性,好比把对象看做key与value的形式来进行渲染。
<3>效果图:
结语:
语言是相通的。