当前位置：首页 > article >正文

[Vue]列表渲染

article 2025/3/25 5:40:43

文章目录

一、语法介绍
二、添加代码
三、结果展示
四、参考文献

如有错误，请指正！！！

一、语法介绍

  <h3>列表渲染</h3>
  <!-- 循环显示数据 -->
  <P v-for="name in names">{{ name }}</P>
  <!-- 获取下标 -->
  <P v-for="(name, index) in names">{{ name }} - {{ index }}</P>
  <!-- of也可以 -->
  <P v-for="name of names">{{ name }}</P>
  <!-- 遍历对象 -->
  <P v-for="item of ueserInfo">{{ item }}</P>
  <!-- 遍历对象属性 -->
  <P v-for="(value, key, index) of ueserInfo">{{ value }}-{{ key }}-{{ index }}</P>

循环读取数据

二、添加代码

<template>
  <h3>列表渲染</h3>
  <!-- 循环显示数据 -->
  <P v-for="name in names">{{ name }}</P>
  <!-- 获取下标 -->
  <P v-for="(name, index) in names">{{ name }} - {{ index }}</P>
  <!-- of也可以 -->
  <P v-for="name of names">{{ name }}</P>
  <!-- 遍历对象 -->
  <P v-for="item of ueserInfo">{{ item }}</P>
  <!-- 遍历对象属性 -->
  <P v-for="(value, key, index) of ueserInfo">{{ value }}-{{ key }}-{{ index }}</P>
</template>

<script>
export default {
  data() {
    return {
      names: ["A", "B", "C"],
      ueserInfo: {
        name: "bob",
        age: 20,
        sex: "男",
      },
    };
  },
};
</script>