Popup组件的:class怎么使用

开始写是两个:class:

<Popup v-model:show="show" class="result-popup code-m" :class="{'code-m':haveCode}" :class="{'code-img':haveImg}" teleport="#app" >

这样写的

后来知道了不能这样写

正确写法:

在 Vue 模板中，每个 HTML 元素只能绑定一次 class 属性。在您提供的代码中，Popup 组件的 class 属性被绑定了两次，因此会导致语法错误。

要设置多个 class 属性，可以使用对象或数组语法：

• 对象语法:

<Popup v-model:show="show" class="result-popup" :class="{'code-m': haveCode, 'code-img': haveImg}" teleport="#app">

在上述代码中，我们通过对象语法绑定了三个 class，其中 result-popup 是固定的 class，code-m 和 code-img 分别根据 haveCode 和 haveImg 的值动态地进行绑定。

• 数组语法

<Popup v-model:show="show" :class="['result-popup', haveCode ? 'code-m' : '', haveImg ? 'code-img' : '']" teleport="#app">

在上述代码中，我们使用数组语法来绑定三个可能存在的 class，分别是 result-popup、code-m 和 code-img。通过在数组中使用三元运算符和空字符串来动态绑定 class。

需要注意的是，使用数组语法时需要格外小心，因为如果在数组中使用了空字符串或 undefined，会导致渲染出来的 HTML 存在额外的空格或 class 属性，这可能会影响样式的正确应用。建议在数组中只使用真实的样式类名，并根据需要使用三元运算符来动态绑定