vue数据调取怎么渲染列表_如何使用vue-列表渲染

1.v-for（数组遍历）

我们用v-for 的方式来遍历整个列表的数据，一般是数组类型的数据,对象类型也可以但不常用。因为数组遍历容易取值，对象遍历不是很容易取值。

<template>
  <div>
     <p v-for="(item,index) in names" v-bind:key="index">{{ item }}</p>
     //item代表每一项,names就是创建的数组，item是被迭代的数组元素的名称。
     //v-bind:key="index"不加的话会报错，index是唯一标识,可以缩写成:key="index"
     //item里有两个参数，第一个参数是选项，第二个是下标index,有两个参数要加（）
  </div>
</template>
<script>
export default {
  name: 'HelloWorld,
  data (){
    return {
        names:["web","java","php"]//创建数组
     }
   }
}
</script>
<style>
</style>

复杂的v-for

<template>
  <div>
    <ul>
      <li v-for="(names,index) in learn" :key="index">{{ names.name }}</li>
    </ul>
  </div>
</template>
<script>
export default {
  name: 'HelloWorld,
  data (){
    return {
       learn:[
         {
         name:"web"
         },
         {
         name:"java"
         },
         {
         name:"php"
         }
       ]
     }
   }
}
</script>
<style>
</style>

2.v-for（对象遍历）

v-for（对象遍历）可以把key过滤掉

<template>
  <div>
      <p v-for="(names,key,index) in learn" ：key="index">{{key}}:{{ myObj }}</p>
      //v-for第二给参数key是键名
  </div>
</template>
<script>
export default {
  name: 'HelloWorld,
  data (){
    return {
      myObj:{
        name:"web",
        age:20,
        sex:"男"
      }
     }
   }
}
</script>
<style>
</style>