[Vue]列表渲染

2025/3/26 3:10:43 来源：https://blog.csdn.net/weixin_44769745/article/details/146424923 浏览: 次关键词：[Vue]列表渲染

文章目录

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

如有错误，请指正！！！

一、语法介绍

  <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>