YouTip

## Vue.js Loop Statements Loops are used with the `v-for` directive. The `v-for` directive requires a special syntax in the form of **site in sites**, where `sites` is the source data array and `site` is the alias for the array element being iterated on. The `v-for` directive can bind data to an array to render a list: ## The v-for Directive new Vue({ el: '#app', data: { sites: [ { name: '' }, { name: 'Google' }, { name: 'Taobao' } ] } }) [Try it »](#) Using `v-for` in a template: ## v-for

• {{ site.name }}
• --------------

[Try it »](#) ### v-for Iterating Over an Object The `v-for` directive can also iterate over the properties of an object: ## v-for new Vue({ el: '#app', data: { object: { name: '', url: '', slogan: 'Learning is not just about technology, but also about dreams!' } } }) [Try it »](#) You can also provide a second parameter as the key name: ## v-for [Try it »](#) The third parameter is the index: ## v-for [Try it »](#) ### v-for Iterating Over an Integer The `v-for` directive can also loop through an integer. ## v-for [Try it »](#) [](#)[Vue.js Conditional Statements](#) [Vue.js Computed Properties](#)[](#) [Volcengine Coding Plan supports mainstream large models like Doubao, GLM, DeepSeek, Kimi, MiniMax, officially supplied, stable and reliable. Configuration Guide ¥9.9/month Subscribe Now](https://maas.xfyun.cn/modelSquare?ch=maas_lm_l2E) ## 5 Notes Write a Note 1. #0 wally 177***86076@139.com [](#)63 `v-for` can also loop through an array: [Try it »]( (javascript:;)wally 177***86076@139.com 9 years ago (2017-10-19) 2. #0 Edge cka***ng@qq.com (https://cn.vuejs.org/v2/api/#v-for) [](#)101 The default behavior of `v-for` tries to modify elements in place rather than replace them. To force it to reorder elements, you need to provide a special `key` attribute: (javascript:;)Edge cka***ng@qq.com (https://cn.vuejs.org/v2/api/#v-for) 9 years ago (2017-11-08) 3. #0 boser 602***724@qq.com [](#)87 Moreover, before iterating and outputting the properties, `v-for` will sort the properties in ascending order: new Vue({ el: '#app', data: { object: { 2: 'Learning is not just about technology, but also about dreams!', 1: '', 0: '' } }}) [Try it »]( Output: is not just about technology, but also about dreams!(javascript:;)boser 602***724@qq.com 9 years ago (2017-11-29) 4. #0 hunterfall 777***21@qq.com [](#)25 When iterating over an object, you can handle nesting. [Try it »]( (javascript:;)hunterfall 777***21@qq.com 8 years ago (2018-07-12) 5. #0 Someone 767***68@qq.com [](#)221 The multiplication table is a programmer's favorite: [Try it »](#) (javascript:;)Someone 767***68@qq.com 8 years ago (2018-07-18)