vue中的循环遍历方法
在Vue中，循环遍历方法主要有两种：v-for指令和v-repeat指令。
- v-for指令： v-for指令可以用于在Vue模板中循环渲染数组或对象的内容。它的语法如下：
<div v-for="item in items" :key="item.id">
{{ item.name }}
</div>其中，items是一个数组或对象，item是数组或对象中的每个元素，item.id是每个元素的唯一标识符，:key用于提高渲染性能。
优势：
- 灵活性高，可以根据数据动态生成DOM元素。
- 可以通过
index获取当前元素的索引。 - 可以使用
v-for的key属性进行性能优化。
应用场景：
- 列表展示：如商品列表、新闻列表等。
- 表格展示：如用户列表、订单列表等。
推荐的腾讯云相关产品和产品介绍链接地址：
- 云服务器CVM：https://cloud.tencent.com/product/cvm
- 云数据库MySQL：https://cloud.tencent.com/product/cdb_mysql
- 云存储COS：https://cloud.tencent.com/product/cos
- v-repeat指令： v-repeat指令是Vue 1.x版本中的循环遍历方法，已在Vue 2.x版本中被v-for指令取代。因此，不推荐在Vue中使用v-repeat指令。
综上所述，Vue中的循环遍历方法主要是通过v-for指令实现的。它可以灵活地循环渲染数组或对象的内容，适用于各种列表和表格展示的场景。腾讯云提供了云服务器CVM、云数据库MySQL和云存储COS等产品，可以满足云计算领域中的各种需求。
相关·内容
我知道，为了使一个对象或数组在Vue中具有反应性，它的属性必须定义在根数据结构上。
将对象数组添加到根数据结构上预先存在的变量并使该数组中的每个元素都具有反应性的每个属性的最佳方法是什么？
我尝试过遍历数组并将每个数组添加到根数据模型中，即：
these_terms.forEach(function(term, idx) {
term.selected = false;
Vue.set(vm.game.set,idx,term);
});
但是，Vue在以后更改"term.selected“属性时仍然不会响应它。
是否有更好的方法来实现我的目标，还是我需要求助于
浏览 0提问于2018-10-29得票数 2
我使用嵌套的For循环来访问json中的数据，然后返回一个变量，以便在前端使用Vue进行访问。我不知道为什么，但我只返回嵌套数组的第一个元素的值？希望有人能帮上忙。这似乎没有任何意义。
*总是只有一个作业，这就是为什么我只在作业中循环。
我已经尝试了forEach，For，For，我已经尝试了map (不确定如何正确实现)。
所以，这是可行的，我可以使用Vue返回密钥。请注意，这只是一个示例，json正在被正确访问，需要将"Data“传递给函数。
function getData(Data) {
var jobs = Jobs;
var i;
for (i =
浏览 57提问于2019-07-22得票数 1
回答已采纳
1回答
我在Vue应用程序中有一个表体，其中有一段行是由数据对象周围的循环构建的。然后，我有一个使用不同数据对象的单独部分，但是，我需要将其中的值与另一个循环中的值进行比较，以便获得条件样式 我想知道是否有一种方法可以在执行v-for时将数据从第一个for循环的value部分发送到方法调用中，这样我就可以在摘要循环中访问它 下面是表格： <tbody v-if="selected === 'Stores'">
<tr v-for="(value, manager) in managerNumbers" :key="ma
浏览 42提问于2021-09-15得票数 0
1回答
Vue.js绑定性能差
、、、
我遇到了一个令我困惑的性能问题。给定以下组件：
<template lang="pug">
div
div {{ counter }}
div(v-for="idx in new Array(10000).keys()", :key="idx")
b-button(v-on:click="increment()") ++
</template>
<script lang="ts">
import { Component, Vue } from "vue-p
浏览 3提问于2021-03-15得票数 0
下面的代码期望this.triggeredTests的所有属性都是数组，并计算它们的总长度：
let savedLen = 0;
const values = Object.values(this.triggeredTests);
for (let i = 0; i < values.length; i += 1) {
savedLen += values[i].length;
}
如果我试图用重写这段代码.在中
for (const val in values) {
savedLen += val.length;
浏览 9提问于2018-09-27得票数 2
回答已采纳
如何使用v-for模板循环输出对象
new Vue({
el: app,
data: {
output: {
player: [1, 5, 61, 98, 15, 315, 154, 65],
monster: [14, 165, 113, 19, 22],
},
},
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
浏览 5提问于2020-06-28得票数 0
回答已采纳
2回答
我正在使用Prime的选项卡面板()，并且我试图仅使用一个v-for循环来呈现每个选项卡内容的vue文件。{{ tab.content }}是一个外部vue文件。我可以呈现它的html视图吗？
到目前为止，这是我的代码：
<TabView scrollable>
<TabPanel v-for="tab in tabs" :key="tab.title">
<template #header>
<img
:src="tab.src"
:width
浏览 9提问于2022-10-21得票数 0
我正在使用WordPress和WordPress进行项目主题化vue.js。但现在我不能渲染数据。这是我的密码
app.js
var App = Vue.extend({});
var postList = Vue.extend({
template:'#post-list-template',
data: function(){
return {
posts: ''
}
},
ready: function(){
posts = this.$reso
浏览 3提问于2017-02-21得票数 1
1回答
你好，你能帮我把它转换成Vue3的javascript吗?谢谢
import type { App } from 'vue'
import Screenfull from './Screenfull.vue'
const components = [
Screenfull,
]
const install = (app: App): void => {
components.forEach(component => {
app.component(component.name, component)
})
}
export
浏览 5提问于2021-01-31得票数 3
回答已采纳
我是Vue.js的新手，我想为我的网站添加一个搜索功能。数据来自API调用，也使用vue.js显示。
显示HTML代码：
<div class="row" v-for="items in data">
<div class="col-lg-4 col-md-6" data-toggle="modal" data-target="#exampleModal" user="'items'" @click="sendInfo(items)&
浏览 0提问于2020-06-12得票数 0
回答已采纳
1回答
我必须从xml文件中提取字符串。使用json编码生成了一个特定值。下面是我能找到的一个例子： <plus_details>
[["Neuf"],["Petite copropri\u00e9t\u00e9"],["Vue mer"]]
</plus_details> 我想提取字符串并将其内联显示，并用逗号分隔，如下所示： Neuf，Petite copropriété，Vue mer 我尝试使用json_decode函数，但我唯一能显示的是： array(3) {
[0]=>
array(1) {
[0]=>
浏览 15提问于2019-06-07得票数 0
1回答
我是新来的vue.js。我试着创建一个最小值和最大值的幻灯片条。
我找到一些并安装了vue范围滑块。我实现了它，它已经成功了。
问题是，当我试图更改滑块上的值时。我从api请求中获得了一些值，这是一个数组：[400, 600, 800, 1000, 1200, 1400, 1600, 1800, 2000, 2500, 3000,]。但我在幻灯片中的最大值必须是一个数字，而不是数组。
我试图在文档中找到一个信息，如何更改这个最大值，但是什么也找不到:/我的幻灯片栏看起来像这个。
我想将值更改为数组中给定的值。
HTML
.box_slider
浏览 1提问于2019-08-07得票数 0
我使用v-for来显示容器中的图像列表。在此之后，我在一个计算属性中使用$refs计算这些图像的开始和结束位置。 问题是我想使用v-bind:class=""来为它们添加动画，但Vue在创建计算属性之前就读取了它(我猜)。 <img ref="imageAnimate" class="image-parts"
v-for="(images, i) in finalImages"
:src="images.full_image_url"
:class="{animated
浏览 25提问于2019-02-17得票数 1
我正在尝试遍历以下JSON： [ { "target": { "source": "https://firebasestorage.googleapis.com/v0/b/vue-photoapp-api.appspot.com/o/photos%2Fmountains-hero.jpg?alt=media&token=fbe93188-d13d-4a7f-a472-4a529aa565a0", "selector": { "conformsTo": "http://www.w3.org/TR/m
浏览 30提问于2020-07-02得票数 0
2回答
首先，我使用模块在Vue中进行无限加载。
为了在每次加载时都添加元素，我将json数据从我的API服务器放到数据对象中，并在将数组拆分成'4‘大小的组后再次将数组保存到变量中。但是问题是，它使用无法从计算机属性获取任何变量的方法事件处理程序来附加元素。我对Vue很陌生，我找不到关于这件事的任何信息。这是密码！
export default {
name: 'main',
data: () => ({
items: [],
line: []
}),
async created () {
this.items = awai
浏览 3提问于2017-05-01得票数 0
回答已采纳
我正在开发我的第一个Vue应用程序，遇到了一些麻烦。
我的问题是:通过一个字典列表，我如何找到并遍历其中的一个字典，但前提是它包含一个给定键的特定值？
就上下文而言，这是一家在线商店。我想循环遍历数据中的类别列表，并在给定的类别中显示产品。
这些数据的结构如下：
data = {
"categories": [
{
"title": "Pants",
"products": [
{
浏览 0提问于2018-07-31得票数 0
我已经在我的项目中导入了，它工作得很好，但我还需要向它添加进度条。有没有办法将进度条集成或添加到vue-strap carousel中？
进度条组件示例：
浏览 2提问于2017-05-17得票数 2
目前，我使用以下命令在Vue.js / Buefy表单中显示每个城市的酒店列表：
<option
:value="h['@attributes'].Name"
v-for="h in cities[form.cities[i].index].Hotels.Hotel"
:key="cities[form.cities[i].index].Hotels.Hotel.Name"
v-if="isArray(form.cities[i].index)"
v-text="h[&
浏览 1提问于2018-05-23得票数 0
1回答
我想为搜索框添加功能，以便在页面上的当前卡片中搜索输入的电影，但我在网上找到的所有其他示例和解决方案似乎对我都不起作用。 这是HTML的主体： <body>
<div id="app">
<div class="row pt-3">
<div class="col">
<input type="text" class="form-control" v-model="search" placeholder=
浏览 19提问于2020-12-12得票数 2
回答已采纳
1回答
我在Vue 3中使用了一个动态类。 在模板中 // Within a loop
<div v-for="(item, index) in store.state.data" :key="`data-${index}`">
<!-- I want to send item as an argument -->
<div :class="myComputed"></div>
</div> 在setup()中 const myComputed = computed(() =>
浏览 11提问于2020-12-12得票数 2
回答已采纳
2回答
我想在Vue.js函数中使用JS数组进行循环。
尝试过的代码：
Vue：
computed: {
bbb: function(){
var vvv=this.Preused.length-this.quote.lines.length;
let added_products=[];
if(vvv > 0){
for(var i = 0; i <= vvv-1; i++){
newly_used.push({...this.Preused[this.manage.code.length+i]});
}
}
return newly_u
浏览 2提问于2020-10-15得票数 1
回答已采纳
2回答
Vue允许有监视给定属性(甚至嵌套的)的观察者：
// keypath
vm.$watch('a.b.c', function (newVal, oldVal) {
// do something
})
但是，给定这样一个vue实例：
var vm = new Vue({
data: {
options: {
a: 1,
b: 2,
c: 3
}
},
})
是否有一种方法可以监视options，以便在使用key和value更改任何子属性时通知我
注释：，我也希望获得更改后的值与之相关的键。
会以这样的方式回应的东
浏览 4提问于2017-03-30得票数 1
回答已采纳
3回答
我在Vue组件中有一个数组，我试图在一个方法中解析它，但是我根本不希望ID在其中。我希望数组与当前相同，但只显示选项索引，而不是id。
在该方法中，是否有一种方法可以将ID索引完全弹出数组？
var vm =
new Vue({
el: "#app",
data: {
options: [
{id:100, option:"1 - John Doe"},
{id:200, option:"2 - Jane Doe"}
]
},
methods: {
getNames(){
浏览 9提问于2022-02-02得票数 0
回答已采纳
我实际上是VueJS学生，我似乎不能将我的JSON文件中的距离返回到表中。返回"5“、"10”的所有数据的最佳实践是什么？可以步行和开车吗？
JSON.parse(result.data.result.iso.drivingi.poij.distance) = this.concurrentsRows ?？
如何定义i和j？
我的文件VueJS(类星体)：
<template>
<div>
<SimpleTableFirstCell
:loading="loading"
:columns="concur
浏览 6提问于2021-11-10得票数 1
1回答
我在动态渲染图标时遇到了问题。我使用v-for从对象数组中获取所有数据。另外，我还有第二个数组，用来保存我处理过的图标的名称。但是，当第一个数组循环时，第二个数组(图标)不会移动。 我尝试创建一个方法来映射第一个和第二个数组中的数据，以创建一个新的数组。但是什么也没发生。 我的代码： Component.vue <template>
<div class="items">
<div class="item" v-for="(param, index) in params" :key="index
浏览 13提问于2021-08-22得票数 2
回答已采纳
我需要根据某个目录中的所有Vue.js文件为.json应用程序生成一个JSON对象。本质上，我需要遍历每个.json文件，将其一些属性附加到JSON对象中，并在应用程序中使用该JSON对象。
这能通过webpack装载机完成吗？还是我应该考虑换个方法？
我创建了一个vue.config.js来添加自定义加载程序：
const path = require('path');
module.exports = {
chainWebpack: (config) => {
config.module.rule('json')
.test(
浏览 1提问于2019-06-06得票数 1
我正在使用一个方法从我的neo4j数据库中检索数据，我想把输出放到一个vue-good表中。这是我使用的方法 testQuery() {
var _this=this
// Get a session from the driver
const session = this.$neo4j.getSession();
var arr = [];
var arr1 = [];
// Or you can just call this.$neo4j.run(cypher, params)
session
.run("MATCH (Ind:Country
浏览 34提问于2020-06-25得票数 0
回答已采纳
我试图通过控制器返回数据库中每一行的图像。
public function getEmotions() {
$emotionsList = Emotions::all();
$images = DB::table('emotions')->select('image')->get();
return $images;
}
这将返回格式错误的UTF-8字符，可能编码错误。
我试过这个解决方案
public function getEmotions() {
浏览 6提问于2020-02-23得票数 1
回答已采纳
1回答
我在弄清楚如何在Vue中动态添加元素时遇到了一些麻烦。我尝试使用V-for作为for循环，但是，输出只是数组中的第二项。我的目标是为每个数组项创建一个新的框。
第一个块是包含两个数组的脚本代码。第二个块是模板或HTML。我试图遍历每个numbs数组并在每个实例中创建一个新框，但是，我在为数组中的每个元素创建新框时遇到了问题。
<script>
export default{
data(){
return{
numbs: ['Application 1', 'Application 2'],
applicatio
浏览 4提问于2020-05-29得票数 0
尝试创建一个简单的博客样式页面。每个帖子都有一个相似的按钮，点击后会增加。我用vuex循环生成10个这样的组件，从vuex存储中获取数据。但是，我希望主页上有一个按钮来重置所有类似的计数器。
通过谷歌，我似乎找到并获得了工作解决方案，要么做一个或另一个，而不是在一起。除了单数计数器外，任何东西都不能正常工作。
如何添加重新设置所有PostEntity计数器道具的按钮？或者我该如何重组它？我想过要在各州做些什么。
这是我的post组件，它被循环到主视图.vue对象中：
<template>
<div class="post">
<div
浏览 4提问于2022-11-17得票数 1
如何在拖放后更新这里的订单？目前使用的是Vue3和vue可拖动( )。
"items": [
{
"name": "Test - 1",
"order": 0
},
{
"name": "Test - 2",
"order": 1
},
{
"name": "Test - 3",
"order": 2
}
]
浏览 10提问于2022-08-11得票数 0
2回答
我在Vue.js中有一个select表单。在选项中，它显示用户列表，其中包含姓名和电话等字段。现在，在本例中，我只能在label - telephone中显示一个字段。如何显示多个字段？例如，name和telephone。
<selector placeholder="Выбрать"
:options="usersList"
track-by="id"
label="telephone"
v-model="user"
:allow-empty="false"
>
&
浏览 2提问于2018-08-17得票数 0
我有一个从API中检索的对象，密钥名是未知的。让我们假设它将以以下格式出现：
var attributes = {
"Colour": ["red", "black", "purple"],
"Size": ["8.0", "8.5", "9.0", "9.5", "10.0"]}
如何在不知道密钥的情况下直接访问Vue中的数据？我知道，如果我知道这些键，下面的选项就可以工作，但是我正在寻找一个选项，可以在不知道键名的情况下引用
浏览 1提问于2019-05-12得票数 0
回答已采纳
我很难将数据从vuejs保存到Laravel控制器，我可以成功地添加一个新的输入字段，但无法将数据保存到数据库中
kidComponent.vue
<div class="pb-3">
<h3 class="font-weight-bold">
Number of Kids: <button @click="addNewChild"><i class="fa fa-list -ic2"></i></button>
</h3
浏览 3提问于2020-10-30得票数 0
1回答
对vue & js来说是个新手。试图创建一个简单的登录身份验证。“if”适用于数组，但不适用于13等。我希望它检查所有数组是否匹配。
这是我的代码：
任何帮助都将不胜感激。
var app1 = new Vue({
el: '#app',
data: {
name: null,
password: null,
users: [],
},
mounted() {
this.users = JSON.parse(localStorage.getItem('users
浏览 0提问于2019-11-17得票数 2
回答已采纳
1回答
我开始学习vue，我试着练习一下，但我被for循环卡住了。 我正在调用我开发的api，以便更好地理解数据处理。调用的输出为： [
{
"_id": "ID1",
"customerID": "ASDF",
"purchases": [
{
"laptop": "DELL",
"price": "500"
浏览 29提问于2020-08-23得票数 2
回答已采纳
2回答
对象循环
、
我试图对一组对象执行一个for循环，但是由于它们的名称都不一样，所以我被困住了。
<div id="components-demo">
<div>Travel Information</div>
<ul>
<li
v-for="(todo, index) in todos"
v-bind:id="index"
v-bind:title="todo"
>{{
浏览 0提问于2019-01-07得票数 0
回答已采纳
5回答
我刚开始使用Vue.js，我想知道如何显示这个JSON对象：
{
"1": [
"15-16",
"16-17",
"17-18",
"18-19"
],
"2": [
"15-16",
"16-17",
"17-18",
"18-19"
]
}
在具有此结构的列表中：
<
浏览 12提问于2021-11-22得票数 0
回答已采纳
我希望有一个干净的main.js，为此，我想将指令移到外部文件中。也就是说，做一些像这样的事情 //main.js
import directives from "./extensions-vue/directives";
app.directive(directives); 和外部文件中 export default {
myDirective: {
mounted(el) {
alert(el);
},
},
}; 我的版本当然不能工作，怎么做才能正确呢
浏览 29提问于2021-06-29得票数 1
回答已采纳
我对Vue JS真的很陌生。我试图使用console.log打印嵌套对象，但它抛出了一个undeifned错误。
阵列图像
视图代码
<b-button variant="primary" v-on:click="dontknow();">Print</b-button>
脚本
methods:{
dontknow(){
console.log(this.allPlayerList.booker_id);
},
}
当我使用(this.allPlayerList.booker_id)时，
浏览 1提问于2020-05-08得票数 0
回答已采纳
我正在尝试将用户的名字打印到UI中，但结果却是空的。
这里的代码框： (单击POSTS > EDIT (Acme )，我试图让用户名显示在“当前联系人”下)
让我解释一下：
我有一个文件组件EditPost.vue，它包含一个posts对象，其数据如下：
posts: [
{
post_id: 1,
process_id: 4,
post_name: "ACME Widget",
poc_list: [1, 2]
},
{
p
浏览 4提问于2020-02-05得票数 1
当我尝试使用硬编码示例时，select选项的实际行为如下所示：
<select>
<option value="3">C</option>
<option value="1">A</option>
<option value="2">B</option>
</select>
order is : C, A, B
然而，当我尝试Vue时，它会将它们排序为键：
data: {
obj: {
"2":
浏览 2提问于2018-12-06得票数 1
，这段代码给了我所有玩家的价值，然后是所有的怪物值。但是我希望输出格式是这样的:一个玩家值然后一个怪物值，一个播放器值然后一个怪物值。
new Vue({
el: app,
data: {
output: {
player: [1, 5, 61, 98, 15, 315, 154, 65],
monster: [2,14, 15, 113, 19, 22,12,54,64],
},
},
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vu
浏览 3提问于2020-06-28得票数 2
回答已采纳
1回答
我正在编写这段代码，其中Vue.JS模块调用一个从外部服务器获取数据并返回JSON响应的PHP。我编写了一个循环，用于从JSON获取特定字段，并以会话格式打印它们。但是它只显示空消息气泡，没有文本(消息气泡的数量是正确的，但里面没有文本)。
这是我的密码：
const app = new Vue({
el: "#chatview",
data: {
data:[],
txtInput: '',
mid:0
},
methods:
{
GetBubbleType: function (name){
浏览 4提问于2019-12-16得票数 0
回答已采纳
我想显示update按钮，当userId与以前的用户之一匹配时&如果userId &其中一个前用户不匹配，那么它将显示<code>E 110</code>submit<code>E 211</code>按钮。
我正试着这样做--
new Vue({
el: '#app',
data: function() {
return {
userId:1,
previousUsers:[1,2],
}
},
浏览 2提问于2022-09-21得票数 1
回答已采纳
1回答
我想构建一个帮助函数来减少我的冗余代码行。与其一遍又一遍地做几乎相同的事情，我想使用这个函数来简单地添加一个参数并减少代码行数。
<template>
<div>
<!-- TODO: ADD ALL PROPS NOW! -->
<UserInfo
:user-name="userData.userName"
:budget="userData.budget"
:leftover="userData.leftover"
/>
浏览 3提问于2020-03-21得票数 1
回答已采纳
1回答
我正在使用matarialize自动完成组件，我需要用存储在vue.js中的数组来设置它的数据
data:{
param:[]
},
mounted(){
this.init();
$('input.autocomplete').autocomplete({
data: {
},
});
},
如何传递jquery函数中存储在vue数据中的param变量？这个数
浏览 2提问于2020-04-26得票数 0
回答已采纳
3回答
我有一个包含3个数组的固定JSON数组。在获取JSON之后，我尝试将它们合并到一个数组中。下面是我尝试过的方法，但是Vue.JS数组似乎是空的。
上一次
this.items = items;
新尝试
this.items = items.concat.apply([], arrays);
我已经在下面的链接中放了一个3页演示的例子：
<body>
<!-- Page List -->
<div class="container text-center mt-5" id="app">
<h1 class=
浏览 0提问于2018-11-14得票数 0
回答已采纳
我是Vue.js新手，所以想知道如何在Vue而不是jQuery中实现这一点？
每当有人在浏览器上键入某项内容时，socket.io和jQuery都会在上创建一个<li> 。
<!doctype html>
<html>
<head>
<title>Socket.IO chat</title>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font: 13px Helvetica,
浏览 1提问于2017-08-16得票数 0
回答已采纳
1回答
我在试着让部件正常工作。我希望在数组中有组件名称，然后导入组件作为异步，然后以某种方式将变量放入app.component。我在这里已经试了大约6个小时了，我搞不懂。我不希望每个组件都有50倍的导入和50倍的app.component，而且它不想为我工作--我可能遗漏了一些显而易见的东西。不幸的是，我不太擅长JS。
main.js
import { createApp, defineAsyncComponent } from "vue";
import App from "./App.vue";
import router from "./router&
浏览 3提问于2020-11-22得票数 3
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频活动推荐
腾讯云开发者
