html - 突出显示选定的组件 VueJS

Question

我在 Vue 文件中工作，我想要突出显示事件元素，实现它的最佳方法是什么？代码

<li @click = "selectedComponent = 'appBugs1'"><i class="ion-bug"></i>Test 1</li>

<li @click = "selectedComponent = 'appBugs2'"><i class="ion-bug"></i>Test 2</li>

<li @click = "selectedComponent = 'appBugs3'"><i class="ion-bug"></i>Test 3</li>

所以假设选择了第一个“li”元素 -> 它应该给“li”提供红色背景，如果选择了另一个元素，它必须重置第一个元素并将红色背景分配给新选择的元素。

我试着在网上搜索，但没有太多内容，如果你只有 2 个选项就很容易了，但我的列表要大得多。那么解决这个问题的最佳方法是什么？

Answer 1

你可以这样做。

<li @click = "selectComponent('appBugs1', $event)"><i class="ion-bug"></i>Test 1</li>

<li @click = "selectComponent('appBugs2', $event)"><i class="ion-bug"></i>Test 2</li>

<li @click = "selectComponent('appBugs3', $event)"><i class="ion-bug"></i>Test 3</li>

添加以下方法:

selectComponent: function(component, event){
  if(this.activeLink){
      this.activeLink.classList.remove('highlight');
  }
  this.activeLink = event.target;
  this.activeLink.classList.add('highlight');

  this.selectedComponent = component;

};

以及属性 activeLink。然后添加您的 css 样式，例如:

.highlight{
    background-color: yellow;
}