向 div 元素添加自定义类 在我的组件中 我有一个 div 为： <div cl...</desc> <question vote="0"> <p>我有一个自定义组件，我在其中传递一些数据来渲染一些CSS样式</p> <p>喜欢</p> <pre><code><title :profile="true" :class="true"/> </code></pre> <p>在我的组件中</p> <p>我有一个div：</p> <pre><code><div class="tabletitle"> </code></pre> <p>我想如果我的自定义类：class是true，我应该添加一个名为flexdisplay的新类，就像</p> <pre><code><div class="tabletitle flexdisplay"> </code></pre> <p>我在这里缺少什么，我尝试将值传递给数据作为 false 但它只是抛出随机错误</p> </question> <answer tick="true" vote="0"> <p>假设您的父组件就像</p> <pre><code><title :profile="true" :showClass="true"/> <!-- modified props name from class to showClass </code></pre> <p>在你的子组件中，正如你所说，你有一个像下面这样的div</p> <pre><code><div class="tabletitle"> </code></pre> <p>你可以做的就是将上面的div更改为下面的格式</p> <pre><code><div :class="['tabletitle', {'flexdisplay': enableClass}]"> <!-- where enableClass will be a computed property </code></pre> <p>在子组件的 script 标签内，定义 props 和计算属性，如下所示</p> <pre><code><script> export default { props: { showClass: { type: Boolean, default: false }, } computed: { // The reason I am doing with computed is for better reactivity enableClass() { return this.showClass; } } } </script> </code></pre> </answer> <answer tick="false" vote="-1"> <p>您可以使用<a href="https://vuejs.org/guide/essentials/class-and-style.html#binding-html-classes" rel="nofollow noreferrer">类条件语法</a></p> <pre><code><div :class="{ "active": isActive }"></div> </code></pre> <p>如果 <pre><code>active</code></pre> 条件为 <pre><code>isActive</code></pre><pre>，这将放置 </pre><code>true</code></p> 类 <p><em>注意</em>，您可以组合 <pre><code>class</code></pre> 和 <pre><code>:class</code></pre> 属性来有条件地放置任一类和经典类</p> <pre><code><div class="myClass" :class="{ "active": isActive }"></div> </code></pre> <p>例如，在您的情况下，如果您有布尔值 <pre><code>class</code></pre> 属性，您的组件将如下所示：</p> <pre><code><template> <div class="tabletitle" :class={"flexdisplay": isClass}> ... </div> </template> <script> export default { props: { isClass: { type: Boolean, default: true } } } </script> </code></pre> <p><strong>注意</strong>：我已将 <pre><code>class</code></pre> 属性更改为 <pre><code>isClass</code></pre>，以便更好地理解并且不要与 class 关键字混淆</p> </answer> </body></html>

问题描述 投票：0回答：0