Vue.js：当用户单击链接时如何更改类？

Posted 2023-02-22

【中文标题】Vue.js：当用户单击链接时如何更改类？

【英文标题】：Vue.js: How to change a class when a user has clicked on a link?

【发布时间】：2017-11-04 19:01:22

【问题描述】：

我正在尝试根据用户是否单击链接向元素添加类。有一个类似的问题here，但它并没有像我想要的那样工作。

我创建了一个组件，该组件具有自己的内部数据对象，该对象具有属性isShownNavigation: false。因此，当用户单击a 时，我会更改isShownNavigation: true 并希望添加我的css 类isClicked。唉，这没有发生 - 当我显示 isShownNavigation 时，isShownNavigation 在组件中保持 false 但我可以在控制台中看到单击时我的方法正在工作。

我将header 组件导入到App。代码如下。

标题组件

<template>
<header class="header">
  <a 
    href="#"
    v-bind:class="isClicked: isShowNavigation"
    v-on:click="showNavigation">
    Click
  </a>
</header>
</template>

<script>
export default 
  name: 'header-component',
  methods: 
    showNavigation: () => 
      this.isShowNavigation = !this.isShowNavigation
    
  ,
  data: () => 
    return 
      isShowNavigation: false
    
  

</script>

应用程序

<template>
  <div id="app">
    <header-component></header-component>
  </div>
</template>

<script>
import HeaderComponent from './components/Header.vue'
export default 
  name: 'app',
  components: 
    'header-component': HeaderComponent
  

</script>

我正在使用来自https://github.com/vuejs-templates/pwa 的 pwa 模板。

谢谢。

【问题讨论】：

如果链接被点击（访问），您可以使用 CSS a:visited 选择器对其进行样式设置。

我想在 a 之外的其他地方添加一个 css 类。为简单起见，我将其添加到 a。

0h k 然后。不管怎样，你从伯特·埃文斯那里得到了答案

【参考方案1】：

不要使用胖箭头函数来定义你的方法、数据、计算等。当你这样做时，this 将不会绑定到 Vue。试试

export default 
  name: 'header-component',
  methods: 
    showNavigation()
      this.isShowNavigation = !this.isShowNavigation
    
  ,
  data()
    return 
      isShowNavigation: false
    
  

看到VueJS: why is “this” undefined？在这种情况下，您也可以真正摆脱 showNavigation 方法，并根据需要直接在模板中设置该值。

<a 
  href="#"
  v-bind:class="isClicked: isShowNavigation"
  v-on:click="isShowNavigation = true">
  Click
</a>

最后，如果/当您最终在标题中包含多个链接时，您将希望有一个与每个链接关联的 clicked 属性，或者一个活动链接属性而不是一个全局 clicked 属性。

【讨论】：

感谢它完美运行。我有一个导航div，我将在其中添加类而不是a。为了简单起见，我使用了a。如果您想为不同的导航链接添加样式，有一个很好的答案forum.vuejs.org/t/…。这是一种有趣的方法。

您绝对可以信赖@LinusBorg 的答案 :) 他是 Vue 团队的核心成员。他也在这里回答问题。