我正在使用vue-cli,这是我的代码。它工作正常,但我想做的是将它们作为数组用v-for列出,而不是如下所示手动进行。我不知道如何动态地匹配每个项目。
<template>
<div class="slides">
<div class="slide-1" :class="{active:selected == 1}">
<figure class="photo">
<img
src="https://images.unsplash.com/photo-1518235506717-e1ed3306a89b?ixlib=rb-1.2.1&auto=format&fit=crop&w=1500&q=80"
alt
>
</figure>
</div>
<div class="slide-2" :class="{active:selected == 2}">
<figure class="photo">
<img
src="https://images.unsplash.com/photo-1502602898657-3e91760cbb34?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1504&q=80"
alt
>
</figure>
</div>
<div class="slide-3" :class="{active:selected == 3}">
<figure class="photo">
<img
src="https://images.unsplash.com/photo-1474606030380-107829a22fc6?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1500&q=80"
alt
>
</figure>
</div>
</div>
<nav>
<h2><span @click="selected = 1" :class="{clicked:selected == 1}">new york</span></h2>
<h2><span @click="selected = 2" :class="{clicked:selected == 2}">paris</span></h2>
<h2><span @click="selected = 3" :class="{clicked:selected == 3}">london</span></h2>
</nav>
</template>
<script>
export default {
name: "app",
data() {
return {
selected: 1
}
}
};
</script>
答案 0 :(得分:1)
您可以执行以下操作:
<template>
<div class="slides">
<div v-for="(item,index) in slides"
:key="index"
:class="[selected === item.id ? 'active' : '', 'slide-'+item.id]">
<figure class="photo">
<img :src="item.src" alt>
</figure>
</div>
</div>
<nav>
<h2 v-for="(item, index) in slides" :key="index">
<span @click="selected = item.id" :class="{clicked:selected === 1}">
{{item.title}}
</span>
</h2>
</nav>
</template>
<script>
export default {
name: "app",
data() {
return {
slides: [
{
id: 1,
title: 'new york',
src: 'https://images.unsplash.com/photo-1518235506717-e1ed3306a89b?ixlib=rb-1.2.1&auto=format&fit=crop&w=1500&q=80',
},
{
title: 'paris',
id: 2,
src: 'https://images.unsplash.com/photo-1502602898657-3e91760cbb34?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1504&q=80',
},
{
title: 'london',
id: 3,
src: 'https://images.unsplash.com/photo-1474606030380-107829a22fc6?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1500&q=80',
}
],
selected: 1
}
}
};
您要循环播放的项目应作为对象存在,然后可以将其循环通过并执行逻辑。
答案 1 :(得分:0)
更多https://vuejs.org/v2/guide/class-and-style.html
<div :class="{ active: isActive }"></div>
如果this.isActive == true,则将添加“活动”类