Vue3 v-for生成DOM元素

前言

v-for的用法, 代码可跑.

---

---

甚麽是v-for指令

v-for指令使得页面可以依据data中数据的量完成页面元素的自动生成，节省工作量。
同时也会把数据绑定到DOM元素.

---

一、v-for生成元素

利用v-for根据数组数据生成元素

数组里有几个数组元素就会生成几个DOM元素, v-for的同时也会把这些数据绑定到DOM元素上,
可以在DOM里使用它们(比如下面用插值表达式直接渲染出来.)

<li v-for="item in arr">item:{{item}}li>

vue3的数据写在setup里;

export default {
  setup() {
    const arr = [
           {name:"baiX", age:102},
           {name:"baiY", age:103},
           {name:"baiZ", age:104},  
    ]
  }
}

效果如上, 三个< li>,里面分别写着 “{name:“baiX”, age:102}, {name:“baiX”, age:102}, {name:“baiY”, age:103}, {name:“baiZ”, age:104}”

---

利用v-for从对象中获取数据

就跟从数组里遍历是一样的:

<li v-for="(item, index) in data.awsl" :key="index">
  item:{{ item }}和attr:{{ attr }}
li>

import { reactive, ref, onMounted } from "vue";
export default {
  setup() {
    let data = reactive({
      awsl: { name: "baiX", age: 18, sex: "female" },
    });
    return {
      data,
    };
  },
};

---

总结

以上是我记下的关于v-for的一些知识点，感觉都是一些比较基础的知识。
您要是觉得还不错，就顺手给点个赞吧 : ·）