html中v-for
时间: 2024-08-17 07:02:38 浏览: 54
vue v-for的使用案例:课程表
在HTML中,`v-for`指令用于Vue.js模板中迭代渲染数组元素。它可以遍历Vue组件绑定的数据属性中的列表,比如上面例子中的items列表。
**示例与解释**:
首先看v-for在列表循环的用法[^1]:
```
<ul id="box">
<li v-for="(item, index) in items" v-if="index < 2">{{ item }} : {{ index }}</li>
</ul>
<script>
// ...
new Vue({
el: '#box',
data: {
items: ['hello', 'world', 'a', 'b', 'v']
}
})
// ...
// 当`items`中有两个项目时(在这个例子里是['hello', 'world']),列表将只显示这两项。
// 如果index小于2,对应的数据(item及其索引)会被显示。
</script>
```
**然后是v-for配合Vue实例化数据的应用**[^2]:
使用模板`<template>`:
```html
<!DOCTYPE html>
<body>
<div id="app">
<!-- 注意,这里不再显式地声明数组数据,因为我们在JavaScript代码中创建了一个 Vue 实例 -->
<ul v-for="book in books">
<li>{{ book.title }}</li>
</ul>
</div>
<script src="https://vue.nextjs.org/v2/scriptsetup.js"></script> <!-- 使用 script setup API -->
<script>
// 创建一个数据模型
const app = createApp({
data () {
return {
books: [
{ title: 'Java无难事' },
{ title: 'VC++深入详解' },
{ title: '元元' }
]
};
}
});
app.mount('#app');
// 这里会为books的每个对象渲染一个新的列表项,展示书籍标题。
</script>
</body>
</html>
```
**相关问题**:
1. `v-if`在v-for循环中的用途是什么?
2. 如何利用`v-on:key`在v-for渲染时防止重复?
3. 如何在v-for中通过索引进行更复杂的条件过滤?
阅读全文