layui循环数据并渲染_Vue 3 列表渲染

最新推荐文章于 2024-07-22 01:43:34 发布

weixin_39608559

最新推荐文章于 2024-07-22 01:43:34 发布

阅读量1.1k

点赞数

文章标签： layui循环数据并渲染

本文链接：https://blog.csdn.net/weixin_39608559/article/details/111640516

版权

本文介绍了在 Vue 3 中如何使用 `v-for` 指令进行列表渲染，详细阐述了 `v-for` 的不同用法，包括遍历数组、对象，以及在组件上的应用。同时，强调了 `key` 属性的重要性，用于帮助 Vue 跟踪节点身份，确保正确的更新和排序。文章还提醒了在使用 `v-for` 时应注意的事项和最佳实践。

摘要由CSDN通过智能技术生成

列表渲染

实验介绍

列表渲染，其实给人的感觉就是 JavaScript 中的 for 循环，只不过将其提取到 HTML 模板层面了，将其指令化，本质还是 for 循环。

用 `v-for` 把一个数组对应为一组元素

我们可以用 v-for 指令基于一个数组来渲染一个列表。v-for 指令需要使用 item in items 形式的特殊语法，其中 items 是源数据数组，而 item 则是被迭代的数组元素的别名。

同样，我们在 src/views/TemplateM.vue 写下如下代码：

<template>
  <div class="template-m-wrap">
    <ul>
      <li :key="index" v-for="(item, index) in items">{
     {item.name}}li>
    ul>
  div>
template>
<script>export default {
     name: "TemplateM",
  data() {
     return {
     items: [
        {
     name: 'Ken',
        },
        {
     name: 'coder'
        },
        {
     name: 'nana'
        }
      ]
    };
  },
};script>