vue學習(十) v-for循環普通數組 、對象數組、 迭代數字


//html
<div id="app">
 <p v-for="item in list">{{item}}</p>
 <p v-for="(item, i) in list">索引{{i}}---值{{item}}</p>
 <p v-for="user in list2">id是{{user.id}}---名字是{{user.name}} </p>
 <p v-for="(user,i) in list2">id是{{user.id}}---名字是{{user.name}}---索引是{{i}}</p>
 //遍歷對象身上的屬性和值,除了有key value 在第三個位置上還有一個索引
 <p v-for="(key,value,i) in user">鍵是{{key}}---值是{{value}}---索引是{{i}}</p>
 
 //迭代數字 迭代從1開始
<p v-for="count in 10">這是第{{count}}次循環</p> </div> //script <script>   var vm = new Vue({     el:'app',     data:{       list:[1,2,3,4,5,6,7],
      list2:[
        { id:1, name:'小白' },
        { id:2, name:'小黑' },
        { id:3, name:'小黃' }
      ],
      user:{
        id:1,
        name:'小紅',
        gender:'女'
      }
    },     methods:{//methods中定義了當前vue實例中所有可用的方法           }   }) </script>

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM