vue中的列表渲染

一、基本列表

使用v-for实现循环遍历列表获取的每一个值

:key

循环列表中每一项的唯一值，可以是设置的唯一值(id)，也可以是索引值

1、遍历数组

（1）使用变量p接收所遍历数组的每一个元素；

（2）使用p和index接收所遍历数组的每一个元素和索引值；

<!-- 遍历数组 -->
        <h2>人员列表</h2>
        <ul>
            <li v-for="(p,index) in persons" :key="index">
                {
  {p.name}}-{
  {p.age}}
            </li>
        </ul>

 

2、遍历对象 

使用value和key接收对象的数值和key

<!-- 遍历对象 -->
        <h2>汽车信息</h2>
        <ul>
            <li v-for="(value,key) in car" :key="key">
                {
  {key}}-{
  {value}}
            </li>
        </ul>

 

3、遍历字符串

使用char和index接收字符串的字符和索引

<!-- 遍历字符串 -->
        <h2>遍历字符串</h2>
        <ul>
            <li v-for="(char,index) in str" :key="index">
                {
  {index}}-{
  {char}}
            </li>
        </ul>

<