VueJS 模板中的元素引用 self

Question

我有一个组件，其中包含许多 div 元素，只有一个在点击时具有“活动”类。如果变量“activeSlide”等于元素，我正在尝试绑定“活动”类。

v-bind:class="{ 'active': activeSlide === ?? }"

我只是不确定?? 应该是什么。我还没有找到任何可以说明元素如何引用自身的东西。或者也许有更好的方法？

.vue 组件文件中的我的代码：

<template>
  <div v-on:click="show" v-bind:class="{ 'active': activeSlide === ?? }"></div>
</template>

<script>
  export default {
    data() {
        return {
            activeSlide: null
        }
    }
    methods: {
       show: function(e) {
           this.activeSlide = e.target;
       }
    } 
}
</script>

Answer 1

我假设?? 旨在成为唯一标识活动元素的东西。

<template>
  <div v-on:click="show('Slide1')" v-bind:class="{ 'active': activeSlide === 'Slide1' }"></div>

  <div v-on:click="show('Slide2')" v-bind:class="{ 'active': activeSlide === 'Slide2' }"></div>
</template>

<script>
  export default {
    data() {
        return {
            activeSlide: null
        }
    }
    methods: {
       show: function(value) {
           this.activeSlide = value;
       }
    } 
}
</script>

所以基本上当您单击幻灯片时，它会将activeSlide 属性更改为传递给v-on:click 方法的值。

有更多动态的方法可以做到这一点，例如，如果您要遍历一系列元素，然后您可以将活动索引与元素的索引进行比较，而不是明确地说 Slide1 或 Slide2。

这是一个动态的例子

<template>
  <div v-for="slide in slides" :key="slide.id" v-on:click="show(slide.id)" v-bind:class="{ 'active': activeSlide === slide.id }"></div>
</template>

<script>
  export default {
    data() {
        return {
            activeSlide: null
        }
    }
    methods: {
       show: function(value) {
           this.activeSlide = value;
       }
    } 
}
</script>

因此您可以使用迭代中的任何可用数据进行比较，只需将slide.whatever 传递给方法并将类设置为相同的东西。