Vue必学指令之v-for

1.v-for 指令.

功能

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

语法

``<标签 v-for = " (值, 索引或者属性名无需求时可省略不写) in 目标结构" :key="唯一值"></标签>

v-for使用的三种结构

<template>
  <div>
    <h1>v-for</h1>
    <ul>
      <li>1.小花</li>
      <li>2.小明</li>
    </ul>
    <hr />
    <!-- 数组 -->
    <li v-for="(item, idx) in arr" :key="item.id">
      {{ item.id }},{{ item.name }},{{ item }},{{ idx }}
    </li>
    <!-- 对象 -->
    <p v-for="(value, porName) in obj" :key="porName">{{ value }}</p>
    <!-- 数字 -->
    <p v-for="(ele, id) in 100" :key="id">i miss you</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      obj: { a: 1, b: 2 },
      arr: [
        { id: 1, name: "于文文" },
        { id: 2, name: "万茜" },
      ],
    };
  },
};
</script>

<style>
</style>

效果如下图

1.v-for 的功能是对标签进行循环生成
2.快速把数据赋予到相同的dom结构上循环生成.