vue的列表渲染

v-for指令：
v-for = " xxx in data "
{{ xxx }}

    <h3> arr-item </h3>
    <ul>
      <li v-for = " item in arr ">
        {{ item }}
      </li>
    </ul>

如果需要 索引 index：
v-for = "(item,index) in data "
{{ item }} — {{ index }}

    <h3> arr - index </h3>
    <ul>
      <li v-for = " (item,index) in arr ">
        {{ item }}---{{ index }}
      </li>
    </ul>

对象：
v-for = “(index,item,key) in obj”

    <h3> obj </h3>
    <ul>
      <li v-for = " (index,item,key) in obj ">
        {{ index }}----{{ item }} -- {{ key }}
      </li>
    </ul>

总结:
1. v-for 最多可以有三个参数
2. 格式：
v-for = “(index,item,key) in data”
名词解释：
index: 索引
item； data中的每一个
key； 如果是对象， 表示对象的key
3. v-for如果有循环嵌套， 那么value可以写成一样的命名， 但是我们建议大家写成不一样的命名， 理由： 比较语义化
4. v-for 可以循环 数字或是一个字符

再举几个例子：

    <h3>json</h3>

  <ul>
    <li v-for = "(item,index) in json">
      {{ item.card }} --- {{ item.name }} --- {{ item.age }}
    </li>
  </ul>

     <h3> 嵌套循环 </h3>

   <ul>
     <li v-for = "item in json">
       <ul>
         <li v-for = "item in item">
           {{ item }}
         </li>
       </ul>
     </li>
   </ul>

     <h3> 循环一个数字 </h3>

   <ul>
     <li v-for = " item in 10 ">
       {{ item }}
     </li>
   </ul>

      <h3> 循环一个字符 </h3>

    <ul>
      <li v-for = " item in 'yanyabing' ">
        {{ item }}
      </li>
    </ul>

  扩展： 
  v-for = ' item in data'

  底层原理： 
    function  v-for( arg ){
      //做字符串处理
      var data = 'data'
      for( var i = 0 ; i < data.length; i++ ){
        
      }
    }