javascript - Vue v-for:在数组中单独迭代一个元素
问题描述
我正在寻找遍历一组跨度标签并添加is-active
到下一个行中,每 3 秒。我有它的工作,但在第一个之后,它添加了所有其余的。如何从活动类中拉出该类并将其添加到下一个数组项?
我已经多次阅读官方文档,似乎没有提到迭代单个项目,只是将它们全部列出或将一个项目推到列表中。
我不确定 'index' 是否在这里播放,以及如何获取 span 元素的索引以添加/减去is-active
。我究竟做错了什么?
var firstComponent = Vue.component('spans-show', {
template: `
<h1>
<span class="unset">Make</span>
<br>
<span class="unset">Something</span>
<br>
<span v-for="(span, index) of spans" :class="{ 'is-active': span.isActive, 'red': span.isRed, 'first': span.isFirst }" :key="index">{{ index }}: {{ span.name }}</span>
</h1>
`,
data() {
return {
spans: [
{
name: 'Magical.',
isActive: true,
isRed: true,
isFirst: true
},
{
name: 'Inspiring.',
isActive: false,
isRed: true,
isFirst: true
},
{
name: 'Awesome.',
isActive: false,
isRed: true,
isFirst: true
}
]
};
},
methods: {
showMe: function() {
setInterval(() => {
// forEach
this.spans.forEach(el => {
if (el.isActive) {
el.isActive = false;
} else {
el.isActive = true;
}
});
}, 3000);
}
},
created() {
window.addEventListener('load', this.showMe);
},
destroyed() {
window.removeEventListener('load', this.showMe);
}
});
var secondComponent = Vue.component('span-show', {
template: `
<span v-show="isActive"><slot></slot></span>
`,
props: {
name: {
required: true
}
},
data() {
return {
isActive: false
};
}
});
new Vue({
el: "#app",
components: {
"first-component": firstComponent,
"second-component": secondComponent
}
});
.container {
position: relative;
overflow: hidden;
width: 100%;
}
.wrapper {
position: relative;
margin: 0 auto;
width: 100%;
padding: 0 40px;
}
h1 {
font-size: 48px;
line-height: 105%;
color: #4c2c72;
letter-spacing: 0.06em;
text-transform: uppercase;
font-family: archia-semibold, serif;
font-weight: 400;
margin: 0;
height: 230px;
}
span {
position: absolute;
clip: rect(0, 0, 300px, 0);
}
span.unset {
clip: unset;
}
span.red {
color: #e43f6f;
}
span.is-active {
clip: rect(0, 900px, 300px, -300px);
}
<div id="app">
<div class="container">
<div class="wrapper">
<spans-show>
<span-show></span-show>
</spans-show>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>
解决方案
为了达到预期的效果,我建议稍微改变一下方法。
isActive
我们可以创建一个变量(例如activeSpan
,它将负责当前活动跨度并随时间递增),而不是更改单个项目的值。
setInterval(() => {
// Increment next active span, or reset if it is the one
if (this.activeSpan === this.spans.length - 1) {
this.activeSpan = 0
} else {
this.activeSpan++
}
}, 3000);
在组件的模板中,我们使类is-active
有条件并依赖于activeSpan
变量:
:class="{ 'is-active': index === activeSpan, 'red': span.isRed, 'first': span.isFirst }"
如果您仍然需要更新spans
数组内的值,可以通过更简单的方式完成,map
例如。还包括以下解决方案中可选的情况。
工作示例: JSFiddle
旁注:不需要为load
事件添加窗口侦听器,因为应用程序本身是在 DOM 准备好后加载的。相反,可以在created
钩子中调用方法。它包含在上面的解决方案中。
推荐阅读
- typescript - 我如何模拟 angular-auth-oidc 客户端以返回假数据
- mlflow - 运行初始创建后是否可以设置/更改 mlflow 运行名称?
- performance - Ubuntu 18.04 上的 Docker 容器中的进程运行缓慢
- html - 是什么导致我的 HTML 文件不加载我的 CSS?
- svg - SVG 动画标签导致不希望的放回
- python - Python Scrapy 返回不同的 url
- java - 程序 6 of 49 前 6 个不包含重复,第 7 个数字必须不是第 6 个中的一个
- node.js - 如何使用 nodeJS 将 DynamicsCRM 与 botframework v4 集成?
- python - 两个实例引用同一个对象问题
- ios - 如何在函数中返回 CLLocationManager didUpdateLocations 的值?