在对计算数组使用v-for设置最大高度时，使用Vue手动循环幻灯片
，可以通过以下步骤实现：
- 首先，确保你已经安装了Vue.js，并在你的项目中引入Vue.js库。
- 在Vue实例中，定义一个数组，用于存储需要循环的幻灯片数据。例如：
data() {
return {
slides: [
{ id: 1, image: 'slide1.jpg' },
{ id: 2, image: 'slide2.jpg' },
{ id: 3, image: 'slide3.jpg' }
]
}
}- 在HTML模板中，使用v-for指令循环渲染幻灯片。同时，可以使用v-bind指令绑定一个动态的最大高度属性。例如：
<div v-for="slide in slides" :key="slide.id" :style="{ 'max-height': slideHeight + 'px' }">
<img :src="slide.image" alt="Slide Image">
</div>- 在Vue实例中，定义一个计算属性来计算幻灯片的最大高度。这个计算属性可以根据幻灯片的数量和每个幻灯片的高度来计算最大高度。例如：
computed: {
slideHeight() {
const slideCount = this.slides.length;
const slideHeight = 200; // 设置每个幻灯片的高度为200px
const maxHeight = slideCount * slideHeight;
return maxHeight;
}
}- 最后，你可以根据需要自定义其他的幻灯片循环逻辑，例如添加上一页和下一页按钮，实现手动循环幻灯片的功能。
这样，当你使用v-for指令循环渲染幻灯片时，每个幻灯片都会根据计算属性的最大高度进行设置，从而实现了对计算数组使用v-for设置最大高度的效果。
推荐的腾讯云相关产品：腾讯云云服务器（CVM）和腾讯云对象存储（COS）。
相关·内容
我已经设法使用Vue-strap carousel组件创建了一个carousel (滑块)，代码如下：
<carousel>
<slider v-for="(photo,index) in photos" :key="photo.sequenceID" >
<img v-bind:src="'https://../photo/' + photo.photoFilename " >
</slider>
</carouse
浏览 2提问于2017-07-01得票数 2
2回答
Vue.component ('app-hous', {
data: function () {
return {
message: 'Hello world, hello',
houses: [
{name: "HILL8"},
{name: "HILL12"},
]
}
浏览 2提问于2021-05-31得票数 0
我有一个有趣的问题。我有在每个幻灯片上动态加载组件的滑块。使用v-for和计算函数在幻灯片中显示正确的组件。
我需要得到最高的滑块的高度，这样我就可以把它设置在主容器上，这样滑块就不会到处移动。问题是，组件直到下一张幻灯片被触发时才会存在，因为组件还不存在。
我最好的猜测是，我需要以某种方式手动循环和加载每个幻灯片，同时收集安装的高度，但是到目前为止我还没有运气。感谢您所能给予的任何帮助
所以裁判的幻灯片永远不会改变。只有它里面的组件，但在挂载上，我想加载每个组件，并获得每次幻灯片的高度，并将其与以前的高度进行比较。我只能得到第一张幻灯片的高度。
我试图添加相关的部分，我希望我已经很好地解释了
浏览 45提问于2019-03-28得票数 0
回答已采纳
在上，它说：
在计算属性不可行的情况下(例如在嵌套的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
这是“所有项目”，“最爱”按钮仅显示“最喜欢的项目”：
以下是我展示所有项目的方式：
<project v-for="(project, index) in projects" :key="project.id" :index="index" :details="project"></project>
这是按钮最喜欢的方法：
toggleFavorite () {
this.favoriteShown = !this.favoriteShown
this.allProjectShown =
浏览 19提问于2022-08-24得票数 0
2回答
我有一个Vue 2旋转木马组件，它的幻灯片子组件使用v-for生成。使用v-show显示并隐藏幻灯片。我不能让CSS transition在幻灯片之间工作。
我试着用<transition>包装幻灯片，但mode=out-in什么也不做，在过渡期间，我在旋转木马中得到了两张幻灯片，一张变暗了，另一张消失了。当我将幻灯片包装在<transition-group>中时，CSS transition的幻灯片根本不显示，幻灯片就会被替换。
我看过，但是幻灯片是根据API的链接列表生成的，我看不到将动态生成和这个解决方案结合起来的方法。
这是一个
浏览 2提问于2017-09-19得票数 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
我正在使用v-for创建多个<p>元素。v-for被包装在Vue <transition>组件中，因为如果满足v-if条件，我希望每个<p>都有动画效果。下面是代码： <transition name="fade">
<p
v-for="(quote, idx) in game.quotes" <-- game.quotes comes from VUEX
:key="`game-quote-${idx}`"
class="quote-box__
浏览 116提问于2020-01-22得票数 3
回答已采纳
在下面的代码示例中，我使用vue转换标记，我想要转换最大高度。与其硬编码这些值，不如在JS中获得滚动高度值。
举例说明。获取这两个项目的滚动高度，并使最大高度、最大高度和最小高度值变为最小高度。
转换是在SCSS中定义的，然后在标记中引用，是否有方法在Vue转换中使用这些动态值？
拥有这个最小宽度0太小了，而最大宽度是一个硬编码值，有点脆弱。
Vue
<transition name="component-fade" mode="out-in">
<div key="search" v-if="searchSit
浏览 6提问于2020-11-10得票数 0
回答已采纳
2回答
我的结构和下面的样例相似
new Vue({
el: '#app',
data: {
tasks: ['task1', 'task2', 'task3'],
actions: {
'task1': {
name: 'dig',
time: '20min'
},
'task2': {
name: 'run',
time:
浏览 4提问于2017-04-21得票数 1
回答已采纳
1回答
在呈现之前，我试图在嵌套的v-for循环中对对象进行排序。我已经解决了排序问题，当我将其记录到控制台时，我可以看到它正在工作，但是当我返回对象chips时，我会收到一个警告：
[Vue warn]: You may have an infinite update loop in a component render function.
如果我创建一个对象的副本，对它进行排序，然后返回chipsCopy，它就能正常工作，而且没有任何警告。很酷，但这似乎是多余的。有什么我可以做的，这样我就不需要复制和不烦扰Vue的渲染？
退伍军人：
<div
v-for="attachmen
浏览 13提问于2021-12-21得票数 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
回答已采纳
Vue: v2.*
在我的项目vuejs中，我使用v-for范围和计算值。
计算
computed: {
numberOfPages() {
const result = Math.ceil(this.collection.total / this.collection.per_page)
return (result < 1) ? 1 : result
}
},
模板
<li class="waves-effect" v-for="(number,index) in numberOfPages"
浏览 8提问于2018-07-20得票数 9
回答已采纳
5回答
我需要加载大约1000个静态图像，.gifs和视频在线幻灯片演示文稿。当前，所有项目都同时加载，查看者需要等待才能看到第一个项目。如何在完成加载之前加载每个项目？
Vue.js Vuetify.js代码：
<v-row v-for="(objkts, index) in group" :key="index">
<v-col v-for="objkt in objkts" :key="objkt.id">
<v-card :key="index" width="
浏览 14提问于2021-10-21得票数 3
回答已采纳
1回答
我有一个v-for列表，它呈现数组的初始状态。但是，当我将项添加到数组时，呈现将不会被更新。文档中的大多数答案--因此这里提到--您必须使用this.$set而不是array.push()，但在我的例子中，这是没有帮助的。
当调用addTag("thing")时，"thing“被添加到数组中，并且它在Vue检查器中是可见的。只是没有更新的v-for而已。
模板
<span v-for="(tag, index) in project.tags" :key="index">
{{tag}} // this re
浏览 1提问于2018-02-12得票数 3
回答已采纳
我试图用Siema生成一个旋转木马，但是当幻灯片用v生成时，我无法让它工作。
，我没有任何错误，我只是感觉到在v-for完成之前调用了新的Siema函数。
我将javascript代码放入组件的挂载()中。
我如何使它工作使用v-for和不使用静态除法？
App.vue
<template>
<carousel :my-array="myArray"></carousel>
</template>
Carousel.vue (不工作)
<template>
<div class=&
浏览 5提问于2017-01-20得票数 0
回答已采纳
我正在创建一个具有排序功能的基本表：
<template>
<!-- more code -->
<tr v-for="item in sortBy(data.body, { name: 'name', order: 1 })">
<td v-for="field in item">{{ field }}</td>
</tr>
<!-- data.body => [{ name: Group 1 }, { name: Group2 }, /
浏览 3提问于2017-11-20得票数 11
回答已采纳
我使用VUE来动画滑块(一个图像列表)。有两/三张幻灯片，每个幻灯片最多由9张图片组成。我有一个计算属性slide，它返回当前图像集。还有另一个属性start，它表示当前幻灯片的第一个图像的数量。<ul>元素是<transition>的直接后代，因此只有当<ul>的键发生变化时，动画才会发生。第一个片段是我想要解决问题的方式。它正在工作，但是如果可以在没有v-for循环的元素上使用a :key属性，则无法找到任何信息。
这个问题到现在是怎么解决的？有两个v-for循环。幻灯片计算属性返回幻灯片，并通过一个元素表人为地循环。我看到的问题是，v-for循环将整个
浏览 0提问于2019-05-10得票数 0
回答已采纳
我试图在文档中找到方法，但我做不到。在Vue JS中，我有一个data结构：
recipes: [
{
name: string,
ingredients: [array],
link: string
}
]
我可以制作一个v-for，让我的应用程序显示名称，链接和成分。但是，我无法找到循环遍历元素数组并使其显示为列表的方法。
这就是现在的样子：
我想让它像：
tomatoesbreadgarlic
因此，基本上，我需要知道如何在对象中请求数组中的项的迭代。
这是我组件的代码：
<!-- This creates a card per re
浏览 5提问于2019-09-26得票数 0
回答已采纳
1回答
我有一个这样的列表： data:{
slides:[
{ slideImg: "images/necklace.webp"},
{ slideImg: "images/necklace2.webp"},
{ slideImg: "images/pants.webp"},
{ slideImg: "images/pants2.jpeg"},
],
} 我试着用v-for： <
浏览 40提问于2020-12-31得票数 1
2回答
我希望使用Vue组件从JSON呈现以下视图：
JSON:
{
"0": {
"title": "Title0",
"content": {
"0": {
"text": "few text here",
"image": false
}
}
},
"1": {
"title": "Title1",
浏览 8提问于2020-04-02得票数 1
回答已采纳
我有两个嵌套循环，我试图在第二个循环中增加一个计数器，这样计数基本上不会重置。
现在:1 2 3 4 1 2 3
需要:1 2 3 4 5 7 8
在中，我会有一个变量，但是它是如何在Vue land中实现的呢？
EDIt
我要模板中的计数，而不是javascript部分。
new Vue({
el: "#app",
data: () => ({
todos: [],
activeIndex: -1
}),
mounted() {
for (let t of ['first', 'second']
浏览 0提问于2019-03-20得票数 0
我想递归地对多维数组中的每个项使用Vue组件，这是一个主题列表。例如，主题1可以有子主题1.1、1.1.1和1.1.2，但是主题2可能根本没有子主题。(我的工作代码在下面列出)
Vue的应用程序data中的My是这样的：
[
['Topic 1', [
'Topic 1.1', [
['Topic 1.1.1', []],
['Topic 1.1.2', []]
]
],
['Topic 2', []],
['Topic 3', [
浏览 0提问于2020-10-11得票数 6
回答已采纳
1回答
我通过v-for遍历日历中的日期：
<ul><li v-for="day in daysInMonth"></li></ul>
在Firebase中，我存储了事件。每个事件都有一个日期属性：
eVeNtKeY
date: 12/7/17
现在，每天都不会有事件，但我需要获取每天的事件计数。我通过Firebase call下载了当月的所有事件，并将其作为数组thisMonthsEvent保存在Vue data中。
data: {
thisMonthsEvents: [bunch of firebase data],
cu
浏览 10提问于2017-07-06得票数 8
回答已采纳
<!DOCTYPE html>
<html lang="en">
<head>
<script src="js/vue.js"></script>
<meta charset="UTF-8">
<title>V-for example</title>
</head>
<body>
<script type="
浏览 1提问于2016-03-01得票数 1
回答已采纳
3回答
我有一个VueJS应用程序。我有两个清单: A，B
A包含所有元素B包含来自A的一些元素
我有<select>标签。每个select标记必须保存B元素的值，并且应该可以选择B中不包含的其他A值。
问:除了标记在B中选择的元素之外，我如何正确地过滤B中不存在的A元素？一个通用的解决方案是对每个元素进行迭代，并从列表中取消不想要的元素。问题是Vue具有反应性属性，这意味着当我更改自定义select的列表时，更改也会传播到其他select。
我已经绕了一个多小时了。我相信我正在为一个简单的问题建立方案，这个问题有一个简单的解决方案，但我找不到。请帮帮我。
const app = ne
浏览 7提问于2020-06-10得票数 0
回答已采纳
2回答
我想知道如何在vue中使用过滤器。
我知道计算机，当我使用它的时候，但我的问题是
我使用这段代码对水果数组进行排序，而不是使用computed
<li v-for="fruit in fruits.sort() ">{{fruit }}</li>
它运行了，我得到了正确的结果
但是控制台通知我有错误
[Vue warn]: You may have an infinite update loop in a component render function.
(found in <MyFilter> at C:\xampp\htdocs\p
浏览 2提问于2017-04-24得票数 7
回答已采纳
1回答
根据项的类型获取具有条件呈现的项
、、、、
根据数据的特定类型，有分隔数据的列表
任务以完成 :-显示所需类型的唯一项。
<script>
export default {
data(){
return{
items:{
{
type: "a",
text: "TEXT A"
},
{
type: "b",
text: "TEXT B"
},
{
type: &
浏览 1提问于2019-01-09得票数 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
我对vue并不熟悉，所以我不确定这是一个简单的问题还是很难回答的问题；但是我有两个组，一个是客户的，一个是部门的，我希望用户能够选择一个客户，一个部门的only.Any帮助很好。
<el-select v-model="value" multiple filterable placeholder="Filters" >
<el-option-group
v-for="group in options"
:key="group.label"
:label="grou
浏览 1提问于2022-09-02得票数 0
1回答
如何解决在slot中使用v-for中的Vue.js变量时出现的错误
属性或方法“幻灯片”不是在实例上定义的，而是在呈现期间引用的。通过初始化属性，确保此属性在“数据”选项中或在基于类的组件中是反应性的。
我就是这样使用组件的：
<Slides v-model="slides">
<AnotherComponent v-model="slide.someproperty" />
在Slides组件中，我有v-for
<div v-for="(slide, index) in value" :key="
浏览 1提问于2019-01-28得票数 1
回答已采纳
4回答
我尝试使用动态属性呈现页面。我的代码
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="root">
<div v-for="current in 2" :key="current">
<p :style="currentObject.color">
{{ current }}
{{ cur
浏览 2提问于2021-02-16得票数 0
回答已采纳
1回答
我想知道如何让父组件知道插槽中的子组件。
例如，如果我想创建一个滑块，并且希望具有以下结构：
在我看来：
<vue-slider>
<vue-slide name="First slide!">First slide content</vue-slide>
<vue-slide name="Second slide!">Second slide content</vue-slide>
</vue-slider>
VueSlider.vue
<template>
浏览 1提问于2018-01-08得票数 1
回答已采纳
1回答
我正在创建一个注册表单，用户必须选择出生日期。
我正在浏览一个月的列表和相应的输出日。
let selectedMonth = 'April'
new Vue ({
el: '#app',
data: {
months: [
{month: 'January', days: 31},
{month: 'February', days: 28},
{month: 'March', days: 31},
{month: 'April',
浏览 1提问于2018-04-07得票数 1
回答已采纳
使用Vue，我有一个具有固定高度、溢出:隐藏的div容器，我希望遍历javascript数组，将每个项添加到div，并在到达div空间底部时停止。也需要它的响应。
<div class="container">
<div class="header">Header</div>
<div class="body" v-for="item in items">
<div>{{ item.data }}</div>
</div>
浏览 3提问于2022-07-11得票数 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
1回答
Vue新手，我想循环遍历每个类别，然后显示帖子。
<section v-for="(category) in (categoryList)">
<h2>{{category.title}}</h2>
<div v-for="(post) in (sortedActivity, filteredList)">
{{post.title}}
</div>
</section>
类似于上面的内容。
sortedActivity函数是一个简单的排序函数，fi
浏览 1提问于2019-05-25得票数 0
1回答
如何不定义v-for循环中的循环变量？如果没有定义，为什么要输入循环呢？
我得到的错误是TypeError: Cannot read property 'title' of undefined。
这是模板中的代码：
<!-- loop through measurements -->
<div class="test-container" v-for="(measurement, m) in printData.measurements" :key="m">
<div class="gr
浏览 1提问于2022-09-29得票数 0
我在我的vue.js应用程序中使用了这个v-for循环： <div v-for="(word, index) in dictionary">
// break if index > 20
<p>{{word}}</p>
</div> 我想在渲染20个单词后跳出循环。我怎样才能做到这一点呢？我看了看docs，但没有看到任何关于这方面的内容。
浏览 443提问于2017-08-01得票数 10
回答已采纳
1回答
我正在与i18n的Vue应用程序的工作，并想列出一个大的JSON文件中的选定语言的项目。
以下是一个示例JSON文件：
items: [
{
"name_en": "Name",
"name_de": "Name"
},
{
"year_en": "Year",
"year_de": "Jahr"
}
]
我想像这样用v-for获取项目：
<div v-for="(item, index) in data.
浏览 62提问于2021-06-11得票数 0
在Vue.js中创建幻灯片时出现以下错误：
[Vue warn]: Unhandled error during execution of scheduler flush. This is likely a Vue internals bug. Please open an issue at https://new-issue.vuejs.org/?repo=vuejs/vue-next
at <Anonymous key=1 >
at <Anonymous pager="true" options= {initialSlide: 1, speed
浏览 15提问于2021-01-22得票数 7
回答已采纳
1回答
Vue警告我以下消息：
在组件呈现函数中可能有一个无限的更新循环。
我发现，我应该使用计算方法，而不是方法，但它对我不起作用。是什么导致了这个问题？一切正常，没有无限循环发生，但Vue仍在警告我。
.battle__invite(v-for='(invite, index) in invites', :key='index')
battle__result.battle__result--finished(
:class='getResultClass(invite.challengerScore, invite.cha
浏览 2提问于2021-09-14得票数 1
回答已采纳
1回答
我试着用css转换来实现div的幻灯片效果，但是很明显，这种转换只在接近的情况下起作用。
HTML：
<div class="slider closed" id="more-details"> Some content </div>
CSS：
.slider {
overflow-y: hidden;
transition-property: all;
transition-duration: .8s;
transition-timing-function: cubic-bezier(0, 1, 0.2, 1);
}
.
浏览 1提问于2016-05-06得票数 0
回答已采纳
Vue-Owl-Carousel使用基本模型工作： <carousel>
<img src="https://placeimg.com/200/200/any?1">
<img src="https://placeimg.com/200/200/any?2">
<img src="https://placeimg.com/200/200/any?3">
<img src="https://placeimg.com/200/200/any?4">
<
浏览 98提问于2019-05-18得票数 0
我有一个非常简单的vue.js组件，它显示数据列表(有两个字段的两个对象)。
组件vue.js代码:
<template>
<div>
<h1>Genre</h1>
<b-container>
<b-row>
<b-col v-for="data in genre" v-bind:key="data.id" v-bind:title="data.name">
浏览 1提问于2019-01-31得票数 3
回答已采纳
如果我这样做：
<ul>
<li v-for="value in testData">
<span v-if="Array.isArray(value)" v-for="morevalue in value"> {{ morevalue }}</span>
<span v-else> {{ value }} </span>
</li>
</ul>
v-else中的跨度也会在第二个V上循环，因为即使它上面没有任何V-FOR，为什么？
这是Vu
浏览 1提问于2018-03-08得票数 1
我想根据v-for循环中的" group“属性对元素进行分组。这些数据是从API中获取的。我怎么能解决这个问题？
这就是我想要的：
这是我的代码：
var example1 = new Vue({
el: '#example',
data: {
people: [ // ordered by group
{ name: 'Mary', group: 1 },
{ name: 'John', group: 1 }
浏览 2提问于2018-11-03得票数 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
这是我的JS代码： Vue.component('card-stack', {
props: ['course'],
template: `
<h3 class="course-card__title">
{{ course.title }}
</h3>
`
})
new Vue({
el: '#app',
data: {
courses: [
{ title: 'sometext' }
]
浏览 11提问于2020-09-05得票数 1
这段代码：
<tbody v-for="contact in contacts">
<tr v-on:click="selectContact(1)">
在Vue js中运行良好。
但这一点：
<tbody v-for="contact in contacts">
<tr v-on:click="selectContact({{contact.index}})">
似乎不太管用。导致错误。那么如何将像contact.index这样的环境变量传递到事件方法中呢？
浏览 32提问于2017-01-19得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
腾讯会议活动推荐
腾讯云开发者
