Question

是否可以像这样在v-if块上使用style？

<style lang="scss" v-if="pinkTheme">
.ac-textfield 
{
    background: hotpink;
}
</style>

我尝试了此操作，但它不起作用（v-if指令被忽略）。我知道我可以这样做：

<div class="ac-textfield" v-style="{ background: pinkTheme ? 'hotpink' : false }"></div>

但是，如果我想使用pinkTheme的值来调制多个样式，这将很快变得难以维护。现在，我正在使用CSS选择器来达到预期的效果：

<template>
    <div class="ac-textfield" :class="{ pinkTheme }">
    </div>
</template>

<style lang="scss">
.ac-textfield
{
    //...
}

.ac-textfield.pink-theme
{
    background: hotpink;
}
</style>

但是，我不太喜欢这种解决方案（我希望在主题之间实现更大的分离，并且希望浏览器一次只加载一个主题）。有什么方法可以使第一个代码块起作用？

Answer 1

不能工作，因为scss必须编译为css-这是在构建时完成的。但是，v-if仅在 运行时 处执行/解释。

将要进行的工作是在单个文件vue组件的style部分中包含template块，但是请注意，您只能在其中使用CSS，而不能使用SCSS。具有与每个组件实例一起呈现的明显缺点。

您使用条件CSS类的方法实际上是正确的方法，因此您一定要坚持使用。

Answer 2

v-if用于条件html渲染，v-if接受应该返回true或false的getter函数。您不能在样式中使用v-if。

v-if在样式块上

2 个答案: