Vue.js 迴圈語句
阿新 • • 發佈:2022-05-11
迴圈使用 v-for 指令。
v-for 指令需要以 site in sites 形式的特殊語法, sites 是源資料陣列並且 site 是陣列元素迭代的別名。
v-for 可以繫結資料到陣列來渲染一個列表:
<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>
模板中使用 v-for:
<ul> <template v-for="site in sites"> <li>{{ site.name }}</li> <li>--------------</li> </template> </ul>
v-for 迭代物件
v-for 可以通過一個物件的屬性來迭代資料:
<div id="app"> <ul> <li v-for="value in object"> {{ value }} </li> </ul> </div> <script> new Vue({ el: '#app', data: { object: { name: '啊哈', url: 'http://www.runoob.com', slogan: '加油努力' } } }) </script>