当 isActive 为 true 时，HTML 将被渲染成为：

 

<p class="active">Hi</p>

 

如果你的组件有多个根元素，你需要定义哪些部分将接收这个类。可以使用 $attrs 组件属性执行此操作：

 

实例

<div id="app">

    <runoob class="classA"></runoob>

</div>

 

<script>

const app = Vue.createApp({})

 

app.component('runoob', {

  template: `

    <p :class="$attrs.class">I like runoob!</p>

    <span>这是一个子组件</span>

  `

})

 

app.mount('#app')

</script>

 

注意：template 中 ` 是反引号，不是单引号 '。

 

以上实例 div class 渲染结果为：

 

<div id="app" data-v-app=""><p class="classA">I like runoob!</p><span>这是一个子组件</span></div>