Vue 3中的v-bind类没有应用样式

omvjsjqw 于 2023-06-30 发布在 Vue.js

关注(0)|答案(2)|浏览(222)

<template>
  <a class="nav-link" :class="activeClasses" :href="page.link.url">
    {{ page.link.text }}
  </a>
</template>

<script>
export default {
  props: ["page", "isActive"],
  computed: {
    activeClasses() {
      return {
        active: this.isActive,
        emphasize: this.isActive,
      };
    },
  },
};
</script>

<style scoped>
.emphasize {
  text-decoration: underline !important;
}
</style>

我尝试在导航栏文本上加下划线，但不起作用。

vue.js

来源：https://stackoverflow.com/questions/76435360/styles-are-not-being-applied-with-v-bind-class-in-vue-3

2条答案

按热度按时间

bjp0bcyl1#

您的组件按预期工作。似乎你传递了错误的props给你的组件。在这里它工作得很好：

<script setup>
  import Comp from './Comp.vue';
  import {ref} from 'vue';
  const active = ref(false);
</script>

<template>
  <div>
    <comp :is-active="active" :page="{link:{text:'example'}}"></comp>
  </div>
  <button @click="active = !active">Toggle</button>
</template>

Vue.js Playground

赞(0）回复(0）举报 2023-06-30

hc2pp10m2#

我同意 Alexandria 。你可能想像这样修改你的 prop ：

props: {
  page: { type: String, default: '' },
  isActive: { type: Boolean, default: false }
},

赞(0）回复(0）举报 2023-06-30

我来回答

Vue 3中的v-bind类没有应用样式

2条答案

相关问题

热门标签

最新问答