自学Vue必看的v-for知识总结

基础

v-for 类似于JS中的for循环
语法格式: item in arr

v-for遍历数组

<body>
  <div id="app">
    //<!-- for遍历数组 在遍历过程中没有使用索引值 -->
    <ul>
      <li v-for="book in books">{{book}}</li>
    </ul>
   // <!-- 在遍历的过程中获取下标值(索引值) -->
    <ul>
      <li v-for="(book,index) in books">{{index+1}}-{{book}}</li>
    </ul>
  </div> 

<script src="../vue.js"></script>
<script>
  var app = new Vue({
    el:'#app',
    data:{
      books:["红楼梦","水浒传","西游记","三国演义"]
    } 
  })
</script>
</body>

在这里插入图片描述

v-for遍历对象

<body>
  <div id="app">
    //<!-- for遍历对象 
      //在遍历对象的过程中,如果只是获取一个值,获取的只是value -->
    <ul>
      <li v-for="value in info">{{value}}</li>
    </ul>
   // <!-- 格式:(value,key) -->
    <ul>
      <li v-for="(value,key) in info">{{key}}-{{value}}</li>
    </ul>
   // <!-- 获取索引值 格式:(value,key,index)-->
    <ul>
      <li v-for="(value,key,index) in info">{{index}}-{{key}}-{{value}}</li>
    </ul>
  </div> 

<script src="../vue.js"></script>
<script>
  var app = new Vue({
    el:'#app',
    data:{
      info:{
        name:"Anna",
        age:25,
        tel:666666
      }
    } 
  })
</script>
</body>

2,size_16,color_FFFFFF,t_70)

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章