《vue之列表渲染》

前言：

在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>效果图：

结语：

语言是相通的。

《vue之列表渲染》

猜你喜欢