Vue.js 在样式标记中有条件地覆盖css

假设我使用的插件在运行时生成

html

，我无法编辑

CSS

或

JS

代码，这样我就可以在特定类中覆盖某些

CSS

。例如，在这种情况下，我通常会：

.video-player{
   max-height: 500px !important;
}

如果必须根据传递给组件的道具有条件地处理此类样式，例如：

<videoPlayer :goSmall="anotherColumn != null"></videoPlayer> 

我如何有条件地呈现它

---

使用lifecycle钩子将其附加到DOM中是一个非常糟糕的主意，因此请不要建议这样做。

如果您不同意使用lifecycle钩子动态应用CSS。您可以始终装箱组件。为您的

videoPlayer

制作两个组件，我们将它们称为

videoplayerooriginal

和

videoPlayerSmall

//videoPlayerOriginal.vue
<videoPlayer></videoPlayer> 

---

现在有条件地呈现它们中的任何一个。

为什么不将特定类应用于组件，而不是传递一个道具

<videoPlayer :class="{ small: anotherColumn != null }"></videoPlayer>

还有css

<style scoped>
.video-player.small {
   max-height: 500px !important;
}
</style>

.video-player.small{
最大高度：500px！重要；
}

使用生命周期挂钩动态应用CSS有什么问题？我假设您需要将videoPlayer组件视为黑色组件-box@AbhishekGupta：问题是，它的影响覆盖了整个dom，我也必须负责删除。一种方法是传统上使用JQuery将样式添加到特定的div中，但我想了解一个Vue解决方案。这是一个非常糟糕的解决方案，因为它会带来冗余代码并使设计复杂化。我想要的是简洁的解决方案。好吧，但如果你真的不想动态更改CSS，也不能更改videoPlayer组件，那么我对此也很好奇。通常，集成第三方插件需要将框架放在一边。@所以，因为我们这里没有“更好”的答案。介意我们再考虑一下反对票吗？因为它仍然可以解决问题。

<videoPlayer :class="{ small: anotherColumn != null }"></videoPlayer>

<style scoped>
.video-player.small {
   max-height: 500px !important;
}
</style>