Question

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

<li @click = "selectedComponent = 'appBugs1'">Test 1</li>

<li @click = "selectedComponent = 'appBugs2'">Test 2</li>

<li @click = "selectedComponent = 'appBugs3'">Test 3</li>

让我们说第一个＆＃34; li＆＃34;选择了元素 - ＆gt;它应该为＆＃34; li＆＃34;提供红色背景，如果选择了另一个，它必须重置第一个并将红色背景分配给新选择的元素。

我试图在网上搜索，但没有太多关于它，如果你只有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;
}

突出显示所选组件VueJS

1 个答案: