『VUE』06. 列表渲染（详细图文注释）

---

欢迎关注 『VUE』 专栏，持续更新中
欢迎关注 『VUE』 专栏，持续更新中

项目结构调整

• 新建ListDemo.vue
  

<template>
  <br />
  <h3>列表渲染</h3>
</template>
<script>

</script>

• App.vue中导入ListDemo.vue

<script setup>
import HelloWorld from "./components/HelloWorld.vue";
import IfDemo from "./components/IfDemo.vue";
import ListDemo from "./components/ListDemo.vue";
</script>

<template>
  <HelloWorld />
  <IfDemo />
  <ListDemo />
</template>

• 为了避免默认的全局css样式干扰效果,我们注销掉样式
  
  把main.css中的样式注销掉

---

v-for 基本应用

这里用的(item, index) in names其实也支持用(item, index) of names,但是因为我个人用python多了所以用的in

ListDemo.vue

<template>
  <br />
  <h3>列表渲染</h3>
  <br />
  <div v-for="(item, index) in names">{{ item }}={{ index }}</div>
  <div>--------------------------------</div>
</template>

<script>
export default {
  data() {
    return {
      names: ["mzh", "wg191", "15-213", "WXL"],
    };
  },
};
</script>

---

v-for与 json的结合

ListDemo.vue

<template>
  <br />
  <h3>列表渲染</h3>
  <br />
  <div v-for="item in names">{{ item }}</div>
  <div>--------------------------------</div>

  <div v-for="item in json_result">
    <p>{{ item.id }}</p>
    <p>{{ item.name }}</p>
    <a :href="item.url">点击访问</a>
  </div>
</template>

<script>
export default {
  data() {
    return {
      names: ["mzh", "wg191", "15-213", "WXL"],
      json_result: [
        {
          id: 19145120,
          name: "mzh",
          url: "www.baidu.com",
        },
        {
          id: 19145117,
          name: "LJC",
          url: "www.baidu.com",
        },
        {
          id: 19145111,
          name: "LTL",
          url: "www.baidu.com",
        },
      ],
    };
  },
};
</script>

---

v-for遍历对象的所有属性

注意v-for="(value, key, inde) of userInfo"中区别与前面的v-for="(item, index) in names"多了一个value的参数位置,我猜测这算是一个方法的重载,参数不同方法内容不同,这个参数的顺序不能乱改的,只能按照这个顺序.(键值-键名-索引)
你可以在后面{{ value }} -{{ key }} -{{ index }}中随意修改顺序.

<template>
  <br />
  <h3>列表渲染</h3>
  <br />
  <div v-for="(item, index) in names">{{ item }}={{ index }}</div>
  <div>--------------------------------</div>

  <div v-for="item in json_result">
    <p>{{ item.id }}</p>
    <p>{{ item.name }}</p>
    <a :href="item.url">点击访问</a>
  </div>

  <div>
    遍历对象的所有属性
    <p v-for="(value, key, index) of userInfo">
      {{ value }} -{{ key }} -{{ index }}
    </p>
  </div>

  
</template>

<script>
export default {
  data() {
    return {
      names: ["mzh", "wg191", "15-213", "WXL"],
      json_result: [
        {
          id: 19145120,
          name: "mzh",
          url: "www.baidu.com",
        },
        {
          id: 19145117,
          name: "LJC",
          url: "www.baidu.com",
        },
        {
          id: 19145111,
          name: "LTL",
          url: "www.baidu.com",
        },
      ],

      userInfo: {
        name: "mzh",
        xuehao: 19145120,
        url: "www.baidu.com",
      },
    };
  },
};
</script>

---

v-for 结合json遍历多个对象的所有属性

注意变量作用域,index的两次出现,分别代表了对象索引和对象的键索引.

<template>
  <br />
  <h3>列表渲染</h3>
  <br />
  <div v-for="(item, index) in names">{{ item }}={{ index }}</div>
  <div>--------------------------------</div>

  <div v-for="item in json_result">
    <p>{{ item.id }}</p>
    <p>{{ item.name }}</p>
    <a :href="item.url">点击访问</a>
  </div>

  <div>
    遍历对象的所有属性
    <p v-for="(value, key, index) of userInfo">
      {{ value }} -{{ key }} -{{ index }}
    </p>
  </div>

  <div>
    结合json遍历多个对象的所有属性
    <div v-for="(item, index) in json_result">
      第一几个对象:{{ index }}
      <p v-for="(value, key, index) in item">
        对象信息 键值键名索引:{{ value }} - {{ key }}- {{ index }}
      </p>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      names: ["mzh", "wg191", "15-213", "WXL"],
      json_result: [
        {
          id: 19145120,
          name: "mzh",
          url: "www.baidu.com",
        },
        {
          id: 19145117,
          name: "LJC",
          url: "www.baidu.com",
        },
        {
          id: 19145111,
          name: "LTL",
          url: "www.baidu.com",
        },
      ],

      userInfo: {
        name: "mzh",
        xuehao: 19145120,
        url: "www.baidu.com",
      },
    };
  },
};
</script>

---

总结

大家喜欢的话，给个👍，点个关注！给大家分享更多计算机专业学生的求学之路！

版权声明：

发现你走远了@mzh原创作品，转载必须标注原文链接

Copyright 2024 mzh

Crated：2024-3-1

欢迎关注 『VUE』 专栏，持续更新中
欢迎关注 『VUE』 专栏，持续更新中
『未完待续』

---