Question

我尝试在当前所选元素上设置一个“活动”类。我不使用v-for。单击元素时，我将event.target设置为“ selected”属性。在每个元素上，我想将当前元素与“选择”中存储的元素进行比较。但是，如何获取当前元素呢？

或者，如果有一种更简单的方法来实现它，那将很有趣。

模板：

<div id="app">
  <button :class="{'active': selected === ''}" @click="test($event)">{{ message }}</button>
  <button :class="{'active': selected === ''}" @click="test($event)">{{ message }}</button>
  <button :class="{'active': selected === ''}" @click="test($event)">{{ message }}</button> 
</div>

Javascript：

new Vue({
  el: '#app',
  data: {
    message: 'Vue',
    selected: ''
  },

  methods: {

      test(event){
           console.log(event.target)
      this.selected = event.target        //set selected to the DOM element

    }
  }

})

CSS：

.active{
  background: blue;
}

Answer 1

类似这样的东西……？

<div id="app">
  <button :class="{'active': selected === 'a'}" @click="selected = 'a'">{{ message }}</button>
  <button :class="{'active': selected === 'b'}" @click="selected = 'b'">{{ message }}</button>
  <button :class="{'active': selected === 'c'}" @click="selected = 'c'">{{ message }}</button> 
</div>

演示： https://jsfiddle.net/6gxz9y8q/

您还可以使用watchers检测何时更改值。 (demo)，或像(demo)或(demo)一样运行功能，但是不要做类似的事情 (demo)

Vue：设置活动类-获取当前DOM元素

1 个答案: