Vue.js 是一种流行的响应式 Web 开发框架，用于构建现代化的单页面应用程序。在 Vue.js 中，循环渲染非常常见，因此需要灵活的模板语法，以适应不同的需求。本文将介绍如何在 Vue.js 中使用子模板进行循环渲染。
什么是子模板？
子模板是 Vue.js 模板语法的一种高级功能，用于将模板分解为更小的模板片段。子模板可以帮助编写更加模块化的代码，从而更容易理解和维护。
使用子模板进行循环渲染
在 Vue.js 中，使用 v-for 指令进行循环渲染。通常情况下，我们可以省略掉 template 标签，直接在循环体内使用元素或组件。
<ul>
<li v-for="item in items">{{ item }}</li>
</ul>然而，当循环体内元素非常复杂时，这种写法将导致代码难以阅读和维护。这时，子模板就派上用场了。
首先，创建一个子模板，用 template 标签包裹整个模板。
<template id="item-template">
<li>{{ item }}</li>
</template>然后，在父模板中使用 v-for 指令，同时将子模板的引用传递给子元素的 is 属性。
<ul> <li v-for="item in items" is="item-template"></li> </ul>
这样，每个 li 元素都会自动渲染子模板中定义的内容。
在子模板中使用数据
有时候，我们需要在子模板中使用循环变量的值。为此，可以在子模板中定义 props 属性，将循环变量作为属性传递给子元素。
<template id="item-template">
<li :class="{'active': isActive}" @click="handleClick">{{ item }}</li>
</template><ul> <li v-for="item in items" is="item-template" :item="item" :isActive="item === activeItem" @click="activeItem = item"></li> </ul>
在上面的代码中，子模板使用了 isActive 和 handleClick 方法，这些都是在子元素中定义的。
结论
在 Vue.js 中，使用子模板进行循环渲染可以大大提高代码的可读性和可维护性。通过定义子模板，我们可以将循环体内的代码分解为更小的模板片段，以便更方便地组织代码。
示例代码
完整的示例代码如下：
-- -------------------- ---- -------
---- ---------
----
--- ----------- -- ------ ------------------ ------------ --------------- --- ----------- ------------------ - -----------
-----
------
--------- -------------------
--- ------------------ ---------- ----------------------- ---- -------
------------- -------------------- ---- -------
--- -----
--- -------
------ -
------ -
------ --------- --------- ----------
----------- -----
--
--
-------- -
------------- -
-----------------------
--
--
---来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66fb84f244713626015dfe38