Vue.js class 绑定，在 css class 之间插入空 space

Question

我在组件上使用 v-bind:class 绑定，目的是根据 boolean 中的真实性打开和关闭 css class我的 Vue.js 组件。

当我在我的 模板中声明时：

<aside v-bind:class="{'--opened':sidebarVisible}" class="sidebar" id="sidebar">

我的组件的脚本部分：

<script>
import { EventBus } from "@/event-bus.ts";
    export default {
        data(){
            return {
                sidebarVisible:false
            }                
        }    
        //Cut for breavity            
};      

</script>

我希望 Vue.js 将 class 修改为 class="sidebar--opened" 但我得到 class="sidebar --opened" （空 space 在侧边栏和 --opened 之间）。我怎样才能避免这种行为？

Answer 1

您必须为其提供 class 的全名，因为此行将为其添加一个单独的 class。所以解决方案是

<aside v-bind:class="{'sidebar--opened':sidebarVisible}" class="sidebar" id="sidebar">

注意：如果它不起作用，那么您可能必须明确删除 class 'sidebar'。

Vue.js class 绑定，在 css class 之间插入空 space

Vue.js class bindings, inserts empty space between css classes

html

css

web-frontend

vue.js