Shulou(Shulou.com)06/02 Report--

This article mainly explains "how to use template in vue file". The content in the article is simple and clear, and it is easy to learn and understand. Please follow the editor's train of thought to study and learn how to use template in vue file.

In vue files, template acts as a template placeholder to help developers wrap elements and create component template content, but template is not rendered to the page during the loop.

The operating environment of this tutorial: windows7 system, vue2.9.6 version, DELL G3 computer.

The function and use of template in Vue

Let's take a look at a requirement: the following figure p does a list loop with v-for, and now you want span to loop together, what should you do?

There are three ways to do this.

①: loop span directly with v-for (this method can be used, but don't do it this way, because you will cry later)

②: wrap a p around p and span, and loop the p (this method adds an extra p tag)

③: if you don't want to add an extra p, you should use template at this time (recommended)

Template acts as a template placeholder to help us wrap elements, but template is not rendered to the page during the loop

DEMO

V-for {{item.text}}-- {{index}} {{item.text}} var vm = new Vue ({el:'# app' Data: {list: [{id: "010120", text: "How"}, {id: "010121" Text: "are"}, {id: "010122" Text: "you"}]}}) Thank you for reading The above is the content of "how to use template in vue file". After the study of this article, I believe you have a deeper understanding of how to use template in vue file, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.