Vue.js is one of the best frameworks for JavaScript like React JS. The Vue JS is used to design the user interface layer, it is easy to pick up for any developer. It is compatible with other libraries and extensions as well.
In order to repeat a task for a fixed amount of time, we make use of the for loop. There are a lot of data that needs to be rendered on a web page. The v-for is used to traverse over the data and display the required data. You can make use of <template> tag to display data through loops. The <template> tag does not get rendered but the content inside it does. Hence, you have lesser elements in your web content.
Syntax:
<template v-for="item in items">
{{ item }}
</template>
Approach: Here, we will create a Vue project, and then we will create a different UI that displays loop data through v-for inside a template.
Creating Vue Project:
Step 1: To create a Vue app you need to install Vue modules using this npm command. You need to make sure you have the node installed previously.
npm install vue
Step 2: Use Vue JS through CLI. Open your terminal or command prompt and run the below command.
npm install --global vue-cli
Step 3: Run the below command to create the project.
vue init webpack myproject
Step 4: After creating your Vue project move into the folder to perform different operations.
cd myproject
Step to run the application: Open the terminal and type the following command.
npm run dev
Open your browser. Open a tab with localhost running (http://localhost:8080/) and you can see the output shown in the image.
Project Structure: After running the commands (mentioned in the above steps), if you open the project in an editor, you can see a similar project structure (as shown below).
Project Structure
Example: This example illustrates the List Rendering v-for on a <template> in VueJS.
App.vue
<template> <div id="app"> <h1 style="color: green"> neveropen </h1> <h2>v-for on a < template ></h2> <template v-for="(value, key) in object"> <strong> {{ key }}- {{ value }} </strong> <br /> </template> </div> </template> <script> export default { name: "App", data() { return { object: { Site: " Geeks for Geeks ", Framework: " Vue ", Type: " Article ", Subject: " v-for on a <template> ", }, }; }, }; </script> |
Output: You can see the output along with the code in the console. There is no template tag in the console elements. You can see that only the content inside the template is rendered in the DOM.
Loop on template tag
Reference: https://v2.vuejs.org/v2/guide/list.html#v-for-on-a-lt-template-gt
