html - Vue.js 类绑定(bind)，在 css 类之间插入空白

Question

我在组件上使用 v-bind:class 绑定(bind)，目的是根据 的真实性打开和关闭 css 类>boolean 在我的 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="sidebar--opened" 但我得到的是 class ="sidebar --opened"(在 sidebar 和 --opened 之间有一个空白)。我怎样才能避免这种行为？

Answer 1

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

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

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