Vue笔记(2)-列表渲染（未完）

.v-for:列表渲染

  一、把一个数组对应为一组元素

    1、v-for ：根据一组数组的选项列表进行渲染。

     v-for 指令需要使用 item in items 形式的特殊语法，items 是源数据数组并且 item 是数组元素迭代的别名。

<div id="app_1">
    <ul>
        <li v-for="food in foodList">{
  {food.name+":"+food.price}}</li>
    </ul>
</div>

var app1=new Vue({
    el:"#app_1",
    data:{
        foodtime:"今日菜价",
        foodList:[
            {name:"葱",price:10},
            {name:"姜",price:5},
            {name:"蒜",price:8},
        ]
    }
})

       2、在 v-for 块中，我们拥有对父作用域属性的完全访问权限。v-for 还支持一个可选的第二个参数为当前项的索引。

        item in items中in可以用of代替

<ul>
  <li v-for="(food,index) in foodList">{
  {foodtime}}-{
  {index}}-{
  {food.name}}-{
  {food.price}}</li>
</ul>

二、一个对象的 v-for

   1、用v-for通过一个对象的属性迭代

<ul id="v-for-obj">
    <li v-for=