vue指令-v-for

最新推荐文章于 2024-06-15 14:41:39 发布

佐杰

最新推荐文章于 2024-06-15 14:41:39 发布

阅读量168

点赞数

分类专栏： vue分享文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/OnlyoneFrist/article/details/131996566

版权

vue分享专栏收录该内容

30 篇文章 0 订阅

订阅专栏

vue指令-v-for

1、目标

列表渲染，所在标签结构，按照数据数量，循环生成

2、语法

v-for ="(值变量，索引变量) in 目标结构"

示例：

<template>
  <div id="app">
    <div>
      <li v-for="(item ,index) in arr" :key="index">{{ item }}</li>
    </div> 
  </div> 
</template>
<script>
export default {
  data(){
    return{
      arr:["小明","小张","小王"]
      
    }
  },
}
</script>

语法

v-for = " 值变量 in 目标结构"

<template>
  <div id="app">
    <div>
      <li v-for="item in stuarr" :key="item.id">
        <span>{{ item.id }}</span>
        <span>{{ item.name }}</span>
        <span>{{ item.age }}</span>
      </li>
    
    </div>
  
   
    
  </div>
  
</template>

<script>


export default {
  data(){
    return{
      stuarr:[
        {
          id:111,
          name:"张三",
          age:10
        },
        {
          id:222,
          name:"李四",
          age:20
        }
      ]
      
    }
    
  },
  
  
  
  
}
</script>