Vue3 循环渲染 v-for
vue
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
项目地址:https://gitcode.com/gh_mirrors/vu/vue
免费下载资源
·
v-for 指令:用于循环渲染列表数据。
v-for 指令:可以循环数组、对象、字符串【不常用】、指定次数【很少用】。
key 属性:用于给标签添加一个唯一的标识。
key 属性:推荐使用 id、手机号、身份证号、学号 等唯一值。
注:当数据改变后,Vue 会对比 key 属性,只更新被修改的内容,以减少不必要的更新。
语法格式:
// 循环数组
<div v-for="(项目, 下标) in 数组" :key="标识">内容</div>
// 循环对象
<div v-for="(键值, 键名) in 对象" :key="标识">内容</div>
// 循环字符串
<div v-for="(字符, 下标) in 字符串" :key="标识">内容</div>
// 指定循环次数
<div v-for="(数字, 下标) in 次数" :key="标识">内容</div>
// 也可以用 of 替代 in 作为分隔符,效果一样
<div v-for="(项目, 下标) of 数组" :key="标识">内容</div>
循环数组【常用】:
<template>
<h3>循环渲染 v-for</h3>
<ul>
<li v-for="(item, index) in data" :key="item.id">
{{ index }} - {{ item.name }} - {{ item.age }}
</li>
</ul>
</template>
<script setup>
import { reactive } from "vue";
let data = reactive([
{ id: 1, name: "张三", age: 21 },
{ id: 2, name: "李四", age: 18 },
{ id: 3, name: "王五", age: 26 },
]);
</script>
效果:
注:item 表示数组中的每一项、index 表示循环的下标、data 表示循环的数据。
循环对象:
<template>
<h3>循环渲染 v-for</h3>
<ul>
<li v-for="(val, k) in car" :key="k">
{{ val }} - {{ k }}
</li>
</ul>
</template>
<script setup>
import { reactive } from "vue";
let car = reactive({
name: "奥迪A8",
price: "70万",
color: "黑色"
});
</script>
注:val 表示对象中的值、k 表示对象中的键名、car 表示循环的对象。
循环字符串:
<template>
<h3>循环渲染 v-for</h3>
<ul>
<li v-for="(char, index) in str" :key="index">
{{ char }} - {{ index }}
</li>
</ul>
</template>
<script setup>
import { ref } from "vue";
let str = ref("hello");
</script>
原创作者:吴小糖
创作时间:2024.3.2
GitHub 加速计划 / vu / vue
207.52 K
33.66 K
下载
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
最近提交(Master分支:1 个月前 )
73486cb5
* chore: fix link broken
Signed-off-by: snoppy <michaleli@foxmail.com>
* Update packages/template-compiler/README.md [skip ci]
---------
Signed-off-by: snoppy <michaleli@foxmail.com>
Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com> 3 个月前
e428d891
Updated Browser Compatibility reference. The previous currently returns HTTP 404. 3 个月前
更多推荐
已为社区贡献9条内容
所有评论(0)