Vue循環

舉個例子

v-for之類是關于循環的。然后值是xx in xx。

循環讀取數組里的值

<div id="app">
  <ol>
    <li v-for="site in sites">
      {{ site.name }}
    </li>
  </ol>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    sites: [
      { name: 'Runoob' },
      { name: 'Google' },
      { name: 'Taobao' }
    ]
  }
})
</script>

結果如圖

image.png

再比如

<div id="app">
<ul>
    <li v-for="num in list">{{num}}</li>
</ul>
</div>

<script>
    new Vue({
        el:'#app',
        data:{
            list:[1,2,3]
        }
    })

</script>

結果

image.png

遍歷整數

<div id="app">
  <ul>
    <li v-for="n in 10">
     {{ n }}
    </li>
  </ul>
</div>

<script>
new Vue({
    el:'#app'
})

結果

image.png

遍歷對象

value in xx中,value是關鍵字,不能變的。

<div id="app">
  <ul>
    <li v-for="value in xx">
    {{ value }}
    </li>
  </ul>
</div>
?
<script>
new Vue({
  el: '#app',
  data: {
    xx: {
      name: '菜鳥教程',
      url: 'http://www.runoob.com',
      slogan: '學的不僅是技術,更是夢想!'
    }
  }
})

結果

image.png

參考

Vue.js 循環語句 | 菜鳥教程

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • 1.安裝 可以簡單地在頁面引入Vue.js作為獨立版本,Vue即被注冊為全局變量,可以在頁面使用了。 如果希望搭建...
    Awey閱讀 11,097評論 4 129
  • 這篇筆記主要包含 Vue 2 不同于 Vue 1 或者特有的內容,還有我對于 Vue 1.0 印象不深的內容。關于...
    云之外閱讀 5,079評論 0 29
  • 1. Java基礎部分 基礎部分的順序:基本語法,類相關的語法,內部類的語法,繼承相關的語法,異常的語法,線程的語...
    子非魚_t_閱讀 31,767評論 18 399
  • 從三月份找實習到現在,面了一些公司,掛了不少,但最終還是拿到小米、百度、阿里、京東、新浪、CVTE、樂視家的研發崗...
    時芥藍閱讀 42,370評論 11 349
  • 固態、液態、氣態三態的相互轉化是初中物理的學習內容。 今天不聊物理,我們聊人生。 是否有經歷過這樣的階段: 苦苦的...
    豌豆公主郭閱讀 696評論 0 1