如何使用 v-if 和 v-bind 使特定元素具有活动类答案

【问题标题】：How to make a specific element to have an active class using v-if and v-bind如何使用 v-if 和 v-bind 使特定元素具有活动类
【发布时间】：2022-07-15 09:14:20
【问题描述】：

这是以下代码：

<div class="filter-item-wrapper-inner">
                <div class="filter-item" @click="filterImages(1)">
                    <div class="bg-item-img"></div>
                    <div class="filter-item-overlay active">
                        <h5>{{webData.filters[0]}}</h5>
                    </div>
                </div>
                <div class="filter-item" @click="filterImages(2)">
                    <div class="bg-item-img"></div>
                    <div class="filter-item-overlay">
                        <h5>{{webData.filters[1]}}</h5>
                    </div>
                </div>
                <div class="filter-item" @click="filterImages(3)">
                    <div class="bg-item-img"></div>
                    <div class="filter-item-overlay">
                        <h5>{{webData.filters[2]}}</h5>
                    </div>
                </div>
                <div class="filter-item" @click="filterImages(4)">
                    <div class="bg-item-img"></div>
                    <div class="filter-item-overlay">
                        <h5>{{webData.filters[3]}}</h5>
                    </div>
                </div>
                <div class="filter-item" @click="filterImages(5)">
                    <div class="bg-item-img"></div>
                    <div class="filter-item-overlay">
                        <h5>{{webData.filters[4]}}</h5>
                    </div>
                </div>
                <div class="filter-item" @click="filterImages(6)">
                    <div class="bg-item-img"></div>
                    <div class="filter-item-overlay">
                        <h5 class="entertainment-font">{{webData.filters[5]}}</h5>
                    </div>
                </div>
                <div class="filter-item" @click="filterImages(7)">
                    <div class="bg-item-img"></div>
                    <div class="filter-item-overlay">
                        <h5>{{webData.filters[6]}}</h5>
                    </div>
                </div>
            </div>

这是课程：

.filter-item .filter-item-overlay.active {
    background-color: rgba(0, 0, 0, .7291);
}

所以我想通过单击将单个选定元素设置为活动。因此，当用户单击特定过滤器时，它仍然处于活动状态。使用 v-bind 和 v-if 有什么替代方法吗？

【问题讨论】：

您可以使用样式绑定。有关详细信息，请查看 vue 文档：vuejs.org/v2/guide/class-and-style.html
@diealtebremse 你能写一个例子作为答案吗？

标签： javascript vue.js

【解决方案1】：

这是使用样式绑定的代码的简化版本：

var app = new Vue({
  el: '#app',
  data: {
    activeIndex: 0
  }
})

.active {
  color: red;
}

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

<div id="app">
  <ul>
    <li @click="activeIndex=1" :class="[activeIndex===1 ? 'active' : '']">One</li>
    <li @click="activeIndex=2" :class="[activeIndex===2 ? 'active' : '']">Two</li>
    <li @click="activeIndex=3" :class="[activeIndex===3 ? 'active' : '']">Three</li>
  </ul>
</div>

【讨论】：

【解决方案2】：

按照上面的建议，你应该看看 vue 文档：https://v2.vuejs.org/v2/guide/class-and-style.html

但这可能会对你有所帮助：

<template>


<div
    v-for="i in 7"
    :key="'img_' + i"
    class="filter-item" 
    @click="filterImages(i)"
  >
    <div class="bg-item-img"></div>
    <div 
      class="filter-item-overlay"
      :class="{'active' : filteredImage === i}"
    >
      <h5>{{webData.filters[i]}}</h5>
    </div>
  </div>
</template>

<script>
export default {
  name: "Filter",
  data() {
    return {
      filteredImage: -1,
    }
  },
  methods: {
    filterImages(index) {
      this.filteredImage = index;
    }
  }
}
</script>

【讨论】：