Vue 指令 - v-for 渲染数组对象

<template>
  <div>
    <ul>
      <li v-for="item in list">
        {{item.name}} --- {{item.price}}
      li>
    ul>
  div>
template>

<script>
  export default {
    data(){
      return {
        list:[
          {name:'apple',price:'7'},
          {name:'banana',price:'5'},
          {name:'orange',price:'4'}
        ]
      }
    }
  }
script>

注意：
1.v-for 是用在当前当前元素上，不是用在父元素上。

2.{{}} 也可以用v-text 在标签里使用

for="item in list" v-text="item.name + '-' +item.price">

3.为列表标注序号-index要写在循环变量的后面

    <li v-for="(item,index) in list">
         {{item.name}} -- {{item.price}} -- {{index+1}}
    li>

3.也可以为index绑定class，index%2 的时候，添加一个class为odd的类

     <li v-for="(item,index) in list" :class="{odd:index%2}">
         {{item.name}} -- {{item.price}} -- {{index+1}}
     li>