时间戳

首页 > 解决方案 > VueJS 模板中的元素引用 self

vue.js - VueJS 模板中的元素引用 self

问题描述

我有一个包含许多 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>

标签： vue.jsvuejs2vue-component

解决方案

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

<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方法的值。

有更多动态的方法可以做到这一点，例如，如果您要遍历一系列元素，然后您可以将活动索引与元素的索引进行比较，而不是显式地说Slide1or 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方法并将类设置为相同的东西。

推荐阅读