VUE列表

循环数组列表

 <ul>
    <li v-for="(item,i) in movies">{{item}}{{i}}</li>
  </ul>

 const app = new Vue({
    el:'#app',
    data:{
      message:'hello vue',
      movies:['西游','三国','水浒','盗梦空间']
    }
  })

循环对象数组

  <ul>
    <li v-for="(item,i) in listData">{{i}}-id:{{item.id}}-{{item.name}}</li>
  </ul>

  const app = new Vue({
    el:'#app',
    data:{
      message:'hello vue',
      listData:[
        {id:1,name:'孙悟空'},
        {id:2,name:'张飞'},
        {id:3,name:'林冲'},
        {id:4,name:'汤姆'},
      ]
    }
  })

循环对象

  <ul>
    <li v-for="(val,key,i) in user">{{key}}-{{val}}</li>
  </ul>
  const app = new Vue({
    el:'#app',
    data:{
      message:'hello vue',
      user:{
        id:1,
        name:'ocean',
        age:23,
      }
    }
  })