列表渲染与多重列表嵌套渲染

最新推荐文章于 2022-02-24 18:52:47 发布

^一个人^

最新推荐文章于 2022-02-24 18:52:47 发布

阅读量956

点赞数

分类专栏： Vue 学习文章标签： v-for列表渲染

本文链接：https://blog.csdn.net/weixin_44441419/article/details/86292914

版权

本文详细介绍了Vue.js中的列表渲染技术，包括迭代数组、对象中的属性、对象本身以及数字。强调了v-for指令的使用，提到了key属性的重要性，用于帮助Vue跟踪节点身份并有效地更新DOM。此外，还探讨了多重列表嵌套渲染的示例，展示了双重v-for循环的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

@[TOC]列表渲染与多重列表嵌套渲染

列表渲染

我们用 v-for 循环语句来进行一组数组的列表渲染。v-for 指令需要以 item in list 形式的特殊语法，list 是源数据数组并且 item 是数组元素迭代的别名。接下来就介绍 v-for 的四种使用方式，以及与它息息相关的 key 属性。

迭代数组

用 v-for 指令循环一个普通的数组。

代码示例：

   <div id="app">
        <p v-for="(item,i) in list">{
  {item}}</p>
        <!--v-for 还支持一个可选的第二个参数为当前项的索引-->
    </div>

<script>
    var vm = new Vue({
   
        el:'#app',
        data:{
   
            list:[1,2,3,4,5,6]
        },
        methods:{
   }
    });
</script>

注：也可以用 of 替代 in 作为分隔符，因为它是最接近 JavaScript 迭代器的语法。

   <div id="app">
        <p v-for="(item,i) of list">{
  {item}}</p>
        <!--v-for 还支持一个可选的第二个参数为当前项的索引-->
    </div>

迭代对象中的属性

用 v-for 指令循环一个对象数组。

代码示例：

   <div id="app">
       <ul>
          <li v-for="(user,key,i) in list">
          	ID: {
  {user.id}} -> Name: {
  {user.name}}
          </li>
          <!--可以提供第二个的参数为键名，第三个参数为索引值-->
       </ul>
    </div>