vue.js - Vuejs动态添加类
问题描述
我正在使用 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>
解决方案
你可以这样做:
<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
}
}
};
您正在循环的项目应该作为一个对象存在,然后您可以循环它并执行逻辑。
推荐阅读
- javascript - document.getElementById().setAttribute() 在 X3D 中不能正常工作
- python - 无法在 Python 中加载 JPEG CMKY 图像
- c++ - Visual Studio 和 ffmpeg:在 Visual Studio 中构建 FFmpeg - 'ffmpeg.obj'
- pine-script - Tradingview Strategy Tester 不会将金字塔订单累积到同一笔交易中
- javascript - 警告:React 检测到 FormContent Select 调用的 Hooks 的顺序发生了变化
- oracle - Oracle SSL 支持
- javascript - React - 在石头,纸,剪刀游戏中通过钩子(useState())显示不正确的获胜状态
- r - 使用 dplyr 替换来自不同数据帧的多列
- swift - 使用 Xcode 进行的飞鸟游戏中的碰撞和分数标签问题
- handlebars.js - JSReport & Handlebars IF 值为 int