YouTip

## Vue.js Loop Statements\n\nIn Vue, loop statements are primarily implemented using the `v-for` directive, which is used to traverse arrays or objects and generate a corresponding number of elements.\n\nUsing the `v-for` directive on an element allows you to render elements in a loop based on an array or object from the source data.\n\nTraversing an array:\n`v-for="(item, index) in items"`\n\nTraversing an object:\n`v-for="(value, key, index) in object"`\n\n* **Purpose of `key`**: When rendering a list with `v-for`, you must provide a unique `key` attribute for each item. This allows Vue to identify the uniqueness of each item, enabling efficient DOM updates.\n\n* **Nested Loops**: You can nest multiple `v-for` directives to render multi-dimensional arrays or object structures.\n\n`v-for` can bind data to an array to render a list:\n\n## v-for Example\n\n\n\nconst app = {\n data() {\n return {\n sites: [\n { text: 'Google' },\n { text: '' },\n { text: 'Taobao' }\n ]\n }\n }\n}\nVue.createApp(app).mount('#app')\n\n[Try it »](#)\n\n`v-for` also supports an optional second parameter, which is the index of the current item:\n\n## v-for Example\n\n`index` is the index value of the list item:\n\n\n\nconst app = {\n data() {\n return {\n sites: [\n { text: 'Google' },\n { text: '' },\n { text: 'Taobao' }\n ]\n }\n }\n}\nVue.createApp(app).mount('#app')\n\n[Try it »](#)\n\nUsing `v-for` within a `` tag:\n\n## v-for\n\n

• {{ site.text }}
• --------------

\n\n[Try it »](#)\n\n### Iterating Over an Object\n\n`v-for` can iterate over data using an object's properties:\n\n## v-for\n\n const app = { data() { return { object: { name: '', url: '', slogan: '' } } } } Vue.createApp(app).mount('#app') \n\n[Try it »](#)\n\nYou can also provide a second parameter as the key name:\n\n## v-for\n\n\n\n[Try it »](#)\n\nThe third parameter is the index:\n\n## v-for\n\n\n\n[Try it »](#)\n\n### Iterating Over Integers\n\n`v-for` can also loop through integers:\n\n## v-for\n\n\n\n[Try it »](#)\n\n## Displaying Filtered/Sorted Results\n\nWe can process the elements of an array before displaying them. This is typically done by creating a computed property that returns the filtered or sorted array.\n\n## v-for Example\n\nOutputting even numbers from an array:\n\n\n\n[Try it »](#)\n\n### Using v-for with v-if\n\nThe above example combines `v-for` and `v-if` to set a default value for a select element:\n\n## v-for/v-if Example\n\n`v-for` loops through the list, `v-if` sets the selected value:\n\n const app = { data() { return { selOption: "", sites: [ {id:1,name:"Google"}, {id:2,name:""}, {id:3,name:"Taobao"}, ] } }, methods:{ changeVal:function(event){ this.selOption = event.target.value; alert("You selected"+this.selOption); } } } Vue.createApp(app).mount('#app') \n\n[Try it »](#)\n\n## Using v-for on a Component\n\nIf you haven't learned about components yet, you can skip this part.\n\nOn a custom component, you can use `v-for` just like on any regular element:\n\nHowever, no data will be automatically passed to the component because components have their own isolated scope. To pass the iteration data into the component, we need to use props:\n\nThe reason `item` is not automatically injected into the component is that it would tightly couple the component to the `v-for` operation. Explicitly defining the source of the component's data allows the component to be reused in other contexts.\n\nHere is a complete example of a simple todo list:\n\n## Example\n\n\n\n[Try it »](#)