Vue.js 类绑定，在 css 类之间插入空格

Question

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

当我在我的模板中声明：

<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="sidebar--opened"，但我得到了class="sidebar --opened"（侧边栏和--opened 之间有一个空格）。我怎样才能避免这种行为？

Answer 1

你必须给它类的全名，因为这一行会添加一个单独的类。所以解决方案是

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

注意：如果它不起作用，那么您可能必须明确删除类“侧边栏”。