javascript - 对 v-for 中的特定元素使用 v-if
问题描述
所以我的 Vue 页面上有以下 HTML
<div v-for="profile in lab.profiles" v-if="edit || profile.active" class="lab-tests-row-div" @mouseover="">
<div class="clickBox" :class="['clickBox-' + lab.id + '-' + profile.id]" @click="openInfoPopup"></div>
<p class="lab-tests-row test-info-row" v-bind:class="{'active': profile.active}">
<span v-bind:class="{'opacity50':!profile.active}">{{profile.name}}</span>
<i v-if="edit" class="fa fa-minus pull-right removeTestIcon" aria-hidden="true" @click="toggleProfile(lab.id, profile.id)"></i>
<span class="pull-right" v-bind:class="{'opacity50':!profile.active}">{{profile.code}}</span>
</p>
</div>
我想在用户将鼠标悬停在该行上时显示元素“clickBox”,如果我使用带有布尔值的 v-if 并在鼠标悬停时更改它,它们都会显示,因为它们在 v-for 中,我如何只显示他们悬停的行中的div?
解决方案
在v-for指令中,您可以获得元素的索引v-for="(profile, index)
使用该索引仅在模板中显示您想要的样式。
例如。
new Vue({
el: '#app',
data: {
selected : 0
}
})
.selectedClass {
background: lightblue
}
.hoverClass:hover {
background: lightcoral
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<main id="app">
<div v-for="(elem, index) in 4">
<p class="hoverClass" :class="{'selectedClass': selected === index}" @click="selected = index" >{{elem}}</p>
</div>
</main>
https://stackoverflow.com/posts/54025706/edit#
已编辑
class="..."
与 Vue 绑定完美结合:class="..."
已编辑 2
对于嵌套v-for
声明索引的另一个名称。
new Vue({
el: '#app'
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<main id="app">
<div v-for="(item, i) in 2">
<div v-for="(elem, j) in 3">
v-for item {{ i }} v-for elem {{ j }}
</div>
</div>
</main>
推荐阅读
- javascript - 我想根据我的过滤器更新面包屑
- javascript - 如何在带有 React Navigation 的 React Native 中以编程方式在 Android 上隐藏标签栏?
- azure-webjobs - ApplicationInsights customMetrics 数据不适用于 WebJob
- asp.net-mvc - 如何将方法转换为异步?
- javascript - Object.defineProperties 嵌套
- python - 基于边权重的 2 个节点之间的所有路径
- javascript - 在 Javascript 中查找标记的百分比
- coq - 如何在 Coq 中证明 (p -> q) -> (~ p \/ q)
- php - 在不使用循环或递归的情况下计算字符串中 ASCII 码是数字 3 的倍数的字符数
- jasper-reports - 有没有办法在细节带的末尾删除多余的空格?