在v-for中获取当前迭代的元素
，可以使用特殊变量"$index"和"$item"来访问。
"$index"表示当前迭代的索引，从0开始计数。可以在模板中直接使用"$index"来获取当前迭代的索引值。
"$item"表示当前迭代的元素。可以在模板中使用"$item"来访问当前迭代的元素。
这两个特殊变量可以在v-for指令的模板中任意位置使用，以获取当前迭代的索引和元素。
例如，在一个数组中使用v-for进行迭代：
<div v-for="(item, index) in items" :key="index">
<span>索引: {{ $index }}</span>
<span>元素: {{ $item }}</span>
</div>在上述示例中，"items"是一个数组，v-for指令会遍历数组中的每个元素。在每次迭代中，可以使用"$index"和"$item"来获取当前迭代的索引和元素。
对于v-for的应用场景，它通常用于在模板中动态渲染列表数据。通过遍历数组或对象，可以生成多个相同或类似的元素。
推荐的腾讯云相关产品：腾讯云云服务器（CVM）、腾讯云对象存储（COS）。
腾讯云云服务器（CVM）是一种可弹性伸缩的云服务器，提供高性能、可靠稳定的计算能力，适用于各类应用场景。
腾讯云对象存储（COS）是一种安全、低成本、高可靠的云端存储服务，适用于存储和处理大规模非结构化数据。
更多关于腾讯云产品的介绍和详细信息，可以访问腾讯云官方网站：腾讯云。
相关·内容
1回答
如何在vue.js中显示嵌套对象
、、、、
我返回的数据是一个带有嵌套对象的对象数组。我无法在模板中的v-for循环中显示“events”，因为我似乎无法访问返回数据的那一部分。
数据返回如下(从Vue DevTools)：
list: Object
user: "name"
id: "id"
events: Array[3]
0: Object
title: "event 1"
1: Object
title: "event 2"
2: Object
浏览 1提问于2016-01-31得票数 1
回答已采纳
在我的第一个示例中，我的组件模板中有：
<div id="hello">hello world</div>
当在myMethod()中调用console.log(this.$refs['hello'])时，我在控制台中获得了undefined。
在我的第二个示例中，我有：
<div v-for="item in data">
<div :id="'hello-'+item.id">hello {{ item.id }}</div>
</div&g
浏览 2提问于2019-04-03得票数 0
1回答
分页参考
currentPage: 1,
perPage: 3,
computed: {
paginatedItems() {
return this.productsList.slice(
this.currentPage * this.perPage,
(this.currentPage + 1) * this.perPage
);
}
rows() {
return this.productsList.length;
},
},
<div class="overflow-auto&
浏览 2提问于2021-05-14得票数 1
回答已采纳
我试图从数组中的数组中获取b-form-select的值，但无法得到它。我有这样的密码：
<span v-for="(user, index) in Users" :key="index">
<span v-for="(userName, index) in user.details" :key="index"> {{userName.name}}</span>
</span>
我在这里得到了user name，但我想在b-form
浏览 4提问于2021-05-13得票数 0
回答已采纳
1回答
因此，我试图使用下面的代码将行和列插入到表中：
add_to_table(type) {
switch (type) {
case "row":
let columns = this.$refs.table.rows[0].cells.length;
let row = this.$refs.table.insertRow(-1);
row.height = "20px";
for (let i = 0; i < columns; i++) {
let cell = row.ins
浏览 0提问于2018-03-02得票数 2
回答已采纳
1回答
我有一个简单的Vue模板，由一个带有两个数组(虚拟/占位符和实际数据)的对象组成。
data() {
var tableColumns = new Array();
tableColumns.push({"dummyValues": ["date 1", "date 2"], "csvValues": []});
var variables = {
"tableColumns": tableColumns
};
return variables;
}
<td v-for=&#
浏览 0提问于2017-05-02得票数 1
回答已采纳
我不确定Linux内核中链表遍历代码的*_safe变体如何提供额外的安全性保证。
有人能为我简单的头脑解释一下吗？
谢谢。
浏览 0提问于2019-10-19得票数 0
我正试图在C++引物5版中为一个练习编写解决方案。该程序正在编写两个类Message和Folder。每个文件夹都有一组指向消息对象的指针，每条消息都有一组指向其存在的文件夹的指针，因此我编写了以下代码：
为了简洁起见，没有显示整个代码，所以我将重点讨论可能导致问题的部分：
类文件夹；类消息{ public: Message(const std:string&= "")；消息( const Message&)；Message( Message& &)；Message& operator=(const Message&)；Messag
浏览 2提问于2020-02-15得票数 0
回答已采纳
我使用v-for循环显示分页链接-
<div v-for="n in this.totalPages">
<router-link :to="'/top/pages/' + n" @click.native="getPaginatedUser">{{ n }}</router-link>
</div>
每个链接都显示在新的行中，如下所示-
有什么办法可以用单行显示吗？就像这样-
谢谢。
浏览 1提问于2019-08-14得票数 0
回答已采纳
3回答
尽可能简单地说：
我有一个v-for循环。我想要访问循环的一个迭代中的特定元素。由于某些原因，我只能使用ref来做这件事。有没有办法做到这一点？
我尝试了各种不同的方法来实现这一点，但它总是返回未定义的结果。我的代码在v-for循环之外运行得很好。
vue的文档没有介绍这个实例。
循环简化了：
<div v-for="(item, i) in items">
<div ref="card"></div>
</div>
该方法
doThing() {
card = elements.creat
浏览 1提问于2019-01-08得票数 2
1回答
我将一个关联数组编码成HTML表单，如下所示(利用Vue)
// Code:
<div v-for="(obj, index) in arrFriends" :key="index">
<input v-for="(postID, friendID, index) in obj" type="hidden" :name="addString(friendID)" :key="index" :value="postID">
</div>
// E
浏览 2提问于2020-09-04得票数 1
目前，当我有这样一个v-for循环时：
<li v-for="record in records">
<my-vue-list-item :vue-title="record.title"></my-vue-list-item>
</li>
我更新驱动v-for的数据(即为records分配一个新值)，它实际上并不根据新的数据创建新的列表项。它只是更新列表项组件组件上的一些属性。
这是。尝试展开其中一个按钮(例如，单击“展开Apple")，然后单击"Set 2”以查看即使列表项切换，组件仍保
浏览 1提问于2017-05-05得票数 2
回答已采纳
1回答
我是Vue.js的新手。我想要在html元素中指定一个值--例如div。该特定元素具有来自对象数组的值，并且线条的形状为<div>{{array.value}}</div>。我还应用了一个v-for指令，所以它看起来像这样： <ul v-for="(arr, index) in array"
v-bind:key="index">
<div id="el">{{arr.value}}</div>
</ul> 因此，我想以与使用document.getElementById(
浏览 9提问于2020-07-28得票数 2
回答已采纳
1回答
这是我在Vue.Js上的第一个项目。我无法使用v-for显示嵌套对象。当v-for在{{element.fist_name}}上使用时，它会打印空列表。
下面是我在jsfiddle上的代码。
浏览 6提问于2020-05-12得票数 1
我目前正在从键值数组的结果中迭代
data: {
return {
results: [
[{id: 1, name: 'A1'}, {id: 2, name: 'B1'}, {id: 3, name: 'C1'}],
[{id: 4, name: 'A2'}, {id: 5, name: 'B2'}, {id: 6, name: 'C2'}],
[{id: 7, name: 'A3'}, {id: 8, name: 'B3'
浏览 8提问于2019-09-01得票数 1
回答已采纳
在上，它说：
在计算属性不可行的情况下(例如在嵌套的v-for循环中)，可以使用方法。
但是，我能够在嵌套的v-for循环(检查小提琴)中使用计算道具。
new Vue({
el: '#sample',
data() {
return {
numbers: [1, 2, 3, 4, 5]
}
},
computed: {
even() {
return this.numbers.filter(n => n % 2 === 0)
}
}
})
<script src="http
浏览 1提问于2018-02-14得票数 3
1回答
我使用BootstrapVue的b-tabs和lazy道具作为。我有以下问题：
我需要加载一些标签懒散，而另一些不是在使用v-for。
<template>
<b-tabs>
<b-tab lazy v-for="element in elements" :key="element.id" :title="element.title">
<div>[lots of stuff here]</div>
</b-tab&g
浏览 2提问于2021-04-07得票数 1
回答已采纳
1回答
我想将循环对象存储在超文本标记语言元素的id中，以便在单击此元素时可以使用它。我的代码如下所示
<tr v-for="obj in data">
<td v-for="(value, key) in obj" :id="obj"></td>
</tr>
但它不起作用。有人能在这方面帮我吗？
浏览 3提问于2018-02-03得票数 0
回答已采纳
在我的Home.vue组件文件中，我有一个模板，其中有一个组件app-server-status，它是作为v-for循环运行的，但是它正在抛出警告，并显示了文件中的错误，如何解决我已经搜索了很多但没有发现任何有用的东西。
<template>
<div>
<app-server-status v-for="server in 4"></app-server-status> //this line shows error
</div>
</template>
<script>
im
浏览 0提问于2019-09-13得票数 1
回答已采纳
如何从2个列表中创建映射变量，其中第一个列表中的第一个元素应该是映射中的键，而第二个列表中的第一个元素应该是映射中的值，等等。
下面的脚本是抛出错误。
%dw 1.0 %输出应用程序/json %var accountIdMap ={(有效载荷.*accountIdList)：有效载荷.*accountNameList}
浏览 2提问于2016-08-13得票数 1
回答已采纳
我正在尝试使用Jquery构建一个web应用程序。我已经创建了一个函数并全局声明了它，在调用它之后，我使用this.each(function () )并尝试执行函数要求，但我没有得到想要的结果。我也检查了语法，没有收到任何错误。下面是我调用函数的代码：
$('[data-nitspagelabel]').click(function () { //click function on editable div to get editable buttons
var nitsedit = $(this);
var labeltype
浏览 3提问于2016-03-25得票数 0
1回答
我设法计数了数组中的每一个重复元素，现在我只想显示一个和每个产品数量。
这就是我现在拥有的：
我有一个函数，它是从一个名为Helpers.js的文件导出的，然后在Vue组件中使用。
Helpers.js:
export const groupBy = (arr, criteria) => {
return arr.reduce((obj, item, index) => {
const key = typeof criteria === 'function' ? criteria(item, index) : item[criter
浏览 5提问于2021-12-07得票数 2
回答已采纳
我使用以下片段来呈现列表：
<div @click.prevent="myhandler($event)"><!-- Delegated event handler-->
<div class="tasks" v-for="(task, subName) in step.tasks">
<button type="button">
{{ task.caption }}
</button>
&l
浏览 3提问于2017-05-11得票数 4
回答已采纳
3回答
有人能解释一下2 v-for结构之间的区别是什么吗？
<li v-for="item in items" :key="item">
</li>
和
<li v-for="(item, i) in items" :key="i">
</li>
浏览 8提问于2022-02-27得票数 3
1回答
我在Vue中有一个字符串列表，我正在使用v-for在Bootstrap的" list -group“中列出所有的字符串。我想在单击其中一项时设置“活动”状态，但我找不到一种方法来使用for循环来标识列表中的特定项。
HTML -
<div class="list-group" id="ServersList">
<a href="#" class="list-group-item" v-for="Server in Servers">{{Server.text}}</a>
浏览 14提问于2017-07-24得票数 2
回答已采纳
当用户单击data-reportid时，我试图从父<tr>中提取<td>属性。
HTML
<tr :data-reportid="modifiedRows[index]['id']" v-for="(row,index) in modifiedRows" :key="index">
<td v-html="value" v-for="(value, ind) in row" @click="modalRequest(index, ind, val
浏览 3提问于2020-03-08得票数 4
回答已采纳
1回答
如何删除或隐藏引导3滑块的分页？
、、、、
如果幻灯片小于或等于1-隐藏引导3旋转木马的分页。
现在所有滑块的分页都被隐藏了，但是只有第二个滑块(1项)。
我试图这样解决这个任务，但是这个代码不起作用。
我的代码-
function carouselHideIndicators() {
$('.carousel').each(function() {
var carouselItems = $('.carousel-inner item');
if (carouselItems.length <= 1) {
$('.carousel-indicat
浏览 0提问于2018-03-11得票数 2
回答已采纳
几周前我刚开始研究角质。在Vue和React中，当我们呈现一个元素数组时，我们总是使用一个唯一的键来进行更有效的呈现，特别是当元素和顺序或数量发生变化时，这是很有用的。因此，如果您忘记为元素分配create-react-app属性，那么Vue CLI或key总是会对您大喊大叫。
但是为什么在角度上没有这样的警告或错误呢？那么，在没有列表元素key属性的情况下，角是如何有效地呈现列表并对其进行更改的呢？
Vue's v-for：中的键
React地图中的键：
浏览 6提问于2022-06-13得票数 0
回答已采纳
我的意思是：
假设我们在自定义vue组件中有一个v-for指令，其使用方式如下：
<my-custom-component v-for="item in items" :key="item.id">{{item.remark}}</ my-custom-component>
在这里使用:key="item.id"的目的是什么？
浏览 6提问于2017-12-26得票数 16
回答已采纳
对于key属性在v-for中的惟一性，文档并不十分清楚。我猜想它们在v-for的特定实例中应该是唯一的，并且您可能不得不分离具有相同键的元素的v-for。
如果我有一个组件，在我的页面上有两个具有v-for的实例，那么它们是否都有具有相同键的元素？
浏览 3提问于2018-01-04得票数 4
回答已采纳
2回答
我遍历一个对象数组，以便在html中显示一些可选择的信息框。对于它，我在单击事件时绑定了一个类，但当我通过v-for获取元素时，当我选择一个元素时，它会将类绑定到所有元素。 我如何才能区分所选的那个？ 我看过几个jquery的例子，但我想知道有没有其他方法。 我的模板： <div class="list-services">
<div class='column-service'
v-for='estimation in filteredEstimation'
v-bind:key="estim
浏览 5提问于2020-08-19得票数 1
回答已采纳
我试图使用内联模板，我有下拉菜单，但它是混乱的事情切换之间的状态。这是我在主模板中使用的代码：
<div>
<article v-for="(game, index) in games">
<dropdown ref="dropdown" inline-template>
<a v-for="(branch, index) in game.branches" :key="'branch' + index" :href="branch.link">{{
浏览 3提问于2020-07-01得票数 1
我构建了一个以月份和年份作为列的表，这是固定的，不能更改。
我的表当前生成如下所示：
<table>
<tbody class="table">
<tr>
<td id="03-2019">03-2019</td>
<td id="02-2019">02-2019</td>
<td id="01-2019">01-2019</td>
浏览 1提问于2019-04-24得票数 0
回答已采纳
2回答
如果我像这样设置Vue.data数组，我将在Vue控制台日志面板数组中得到像这样的[0: Object, 1: undefined 2: Object];，并且在'v-for="cell in row.cells"'中迭代之后，我得到了任何未定义属性的问题。
我这样解决了我的问题：
v-for="cell in row.cells" v-bind:colspan="cell.colspan" v-if="typeof cell !== 'undefined'"
v-for="cell
浏览 1提问于2019-05-03得票数 0
1回答
我希望图例标签不跟随循环。如果我在与表单标签相同的块中写入图例标签，这是真的吗？
var app = new Vue({
el : '#container',
data : {
menus : [
{formm : "Name"},
{formm : "Age"},
{formm : "Address"},
]
}
浏览 18提问于2021-02-28得票数 0
我的vscode在vuejs v中需要这个属性，如
坏的
<p v-for='person in people'> {{person.name}} </p>
好的
<p v-for='(person, index) in people' :key='index'> {{person.name}} </p>
那么，为什么我们需要:关键属性呢？
浏览 6提问于2017-11-20得票数 6
回答已采纳
我在显示数据库表find方法的结果时遇到了laravel和vue的问题。我不太理解的是为什么v-for指令解析json的结果不正确。 以下是Vue代码： <template>
<table class="table table-hover">
<thead>
<tr>
<th>Class</th>
<th>Amount of Students</th>
<th>
浏览 49提问于2021-02-11得票数 0
回答已采纳
我很难让我的v-for循环创建一个基于数组大小的列表。我以为这是直截了当的，但我很难弄清楚我哪里出了问题。我似乎只能让它产生第一个清单项目。有什么想法吗？当我在dev工具中检查时，我会看到以下内容：
.vue：
<template>
<ul>
<li :v-for="item in items">item
</li>
</ul>
</template>
<script>
export default {
data(){
浏览 4提问于2022-02-10得票数 1
你好，我是非常新的web应用程序开发/ javascript的一般。在过去的4个月里，我只为自己提供了udemy视频的速成课程。
对于我的web应用程序，我使用axios从我的服务器端后端从数据库中检索数据。我有一个logRepository数组，用于推送检索到的数据。
data() {
return {
logRepository: [],
}
},
created() {
axios.get('/myrestapiroute', {
headers: {
'Authori
浏览 0提问于2019-06-03得票数 0
回答已采纳
所以基本上，我要做的是得到一个按钮，只显示在v-for中的第一项。我希望能够添加一个按钮，并使它只打印一次，无论多少次的v-for循环。
下面是包含代码的和下面发布的代码
<div v-for="item in userInformation">
<p>{{item.username}}</p>
<p>{{item.email}}</p>
<p>{{item.age}}</p>
<button> Only Show Once</button> //On
浏览 3提问于2017-11-10得票数 1
回答已采纳
我试图呈现一个学生的表格，其中每一列都是一个主题，在每一栏下列出了所有在这门课上不及格的学生。问题是，我的数据是在行结构而不是列中形成的。下面是一个表行数据的示例：
[{"name":"dummy1","pass":true},{"name":"dummy1","pass":false},{"name":"dummy1","pass":false}]
在本例中，有3个主题，因此行长度为2(包含3个项)。
现在，如果第二个学生的排在下面这样：
[{
浏览 2提问于2019-05-24得票数 0
回答已采纳
2回答
JSTL从对象数组获取值
、、、
我的action类有一个对象数组，如下所示，
Object[] varCount = (Object[]) countList.get(0);
我的调试程序显示了varCount的值。我将这个对象数组放在model中，如下所示：
model.put("varCount ", varCount );
在JSP中，我按如下方式迭代：
<c:forEach var="varCount " items="${model.varCount }" varStatus="loop">
<tr>
&l
浏览 0提问于2013-04-05得票数 0
回答已采纳
我正在尝试嵌套一个v-for循环，这样对于从我的API返回的每4个结果，它们将集中到一行中。 <div v-for="(item, index) in this.info.length/4" :key="item">
<el-col v-for="thing in this.info" :key="thing">
{{ thing }}
</el-col>
</div> 我知道目前嵌套的v-for将打印该行的每一项，我仍然需要对结果进行切片。但是，当
浏览 24提问于2019-02-15得票数 0
我正在尝试将包含html标记的div元素中的文本更改为实际的html。我有一个v-for循环，它将所有文本项列出到div中。
<li v-for="item in items">
<div id="description" class="content">{{item.description}}</div>
</li>
整个文本只包含html元素，而不是将其转换为html，这不是我想要的。
我想过通过一个函数来调用document.innerHTML()，但是我不确定如何让父进程有一个唯一的
浏览 2提问于2020-06-13得票数 0
我有以下代码：
white='\e[0;37m'
array=("{$white}aaaa" "{$white}aaa" "{$white}aaa")
使用cuad=$( echo -e "$array[0]}" | grep -o a | wc -l，我可以计算数组中获得4的"a“。
在这样做之后，使用remainder=$(( $cuad % 3 ))计算余数除以前面结果的3。
我想做的是：
如果余数等于1，我希望删除正在计算的元素的最后一个字符，并将其添加到数组的下一个元素的开头。
如果余数等于2，我
浏览 5提问于2022-06-05得票数 0
回答已采纳
我有个get api，看起来像这样-
this.$API +"api/v1/puzzles/getAll?page=" + this.pageNo +"&limit=" + this.pageLimit,
它接受两个参数页面和限制。如何为这个get api进行分页？
我的html代码：
<md-card>
<md-card-header data-background-color="green">
<h4 class="title">L
浏览 3提问于2021-12-12得票数 0
在我的Nuxt应用程序中，有下面这行代码触发了这个问题标题中提到的错误：
<template v-for="(project, index) in existingProjects">
<span :key="project.projectId"></span>
我尝试在template元素上使用:key属性，还尝试只使用index作为键，但都没有用。
有什么想法吗？
浏览 0提问于2019-06-06得票数 18
回答已采纳
问题: Vuejs有一个组件(文件上传)，该组件在v-for循环中的父循环中呈现。我向它传递了一个属性，以便有条件地呈现一个移除按钮(基本上是从div类型的预览中移除背景)。如何仅使循环中特定组件对显示/隐藏属性做出反应，而不对其他属性做出反应？例如，v-for呈现了3个FileUpload组件。都有isRemoveBtnShown道具。如何使FileUpload1显示按钮，而FileUplod2 and 3不显示？ 父级： <FileUpload v-for="(field, index) in uploadFieldsToRender"
浏览 16提问于2019-07-01得票数 0
回答已采纳
我是jQuery的新手。我在处理数组(比如jQuery对象的方法(我不知道它的正确名称)，比如.height()和.animate() )时遇到了问题，它们只影响查询选择器匹配的第一个元素。
我不知道如何使它们与所需的单一元素一起工作。
就像$('li')返回的第三个元素，或者循环到$(li)的结果中，得到每个结果的高度。
更新：
学会了$(this)[0] === this
浏览 1提问于2014-07-24得票数 0
回答已采纳
我正在尝试使用Vue.js。我写的javascript代码就像... new Vue({
el: '#app',
data: {
classes: []
},
created: function () {
var vm = this
// Fetch API
fetch(xxx.json)
.then(function (response) {
return response.json();
})
.then(
浏览 17提问于2019-04-26得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
云直播活动推荐
腾讯云开发者
