状态驱动CSS
<ul>
<li>写法1：行内中绑定对象</li>
</ul>
<pre><code class="language-javascript">&lt;template&gt;
&lt;div :class=&quot;{ 'myClass1': flag, 'myClass2': flag }&quot;&gt;Andy&lt;/div&gt;
&lt;button @click=&quot;change&quot;&gt;点击&lt;/button&gt;
&lt;/template&gt;
&lt;script setup&gt;
import { ref } from &quot;vue&quot;;
let flag = ref(true)
const change = () =&gt; {
flag.value = !flag.value
}
&lt;/script&gt;
&lt;style&gt;
.myClass1 {
color: red;
}
.myClass2 {
font-size: 30px;
}
&lt;/style&gt;</code></pre>
<hr />
<ul>
<li>写法2：将行内对象放在下边</li>
</ul>
<pre><code class="language-javascript">&lt;template&gt;
&lt;div :class=&quot;obj&quot;&gt;Andy&lt;/div&gt;
&lt;button @click=&quot;change&quot;&gt;点击&lt;/button&gt;
&lt;/template&gt;
&lt;script setup&gt;
import { ref, reactive } from &quot;vue&quot;;
let flag = ref(true)
let obj = ref({
'myClass1': flag,
'myClass2': flag
})
const change = () =&gt; {
flag.value = !flag.value
}
&lt;/script&gt;
&lt;style&gt;
.myClass1 {
color: red;
}
.myClass2 {
font-size: 30px;
}
&lt;/style&gt;</code></pre>
<hr />
<ul>
<li>写法3：行内中绑定数组</li>
</ul>
<pre><code class="language-javascript">&lt;template&gt;
&lt;div :class=&quot;[cl1, cl2]&quot;&gt;Andy&lt;/div&gt;
&lt;/template&gt;
&lt;script setup&gt;
import { ref, reactive } from &quot;vue&quot;;
let cl1 = ref(&quot;myClass1&quot;)
let cl2 = ref(&quot;myClass2&quot;)
&lt;/script&gt;
&lt;style&gt;
.myClass1 {
color: red;
}
.myClass2 {
font-size: 30px;
}
&lt;/style&gt;</code></pre>
<hr />
<ul>
<li>写法4：</li>
</ul>
<pre><code class="language-javascript">&lt;template&gt;
&lt;div :class=&quot;[flag ? 'myClass1 myClass2' : '']&quot;&gt;Andy&lt;/div&gt;
&lt;button @click=&quot;change&quot;&gt;点击&lt;/button&gt;
&lt;/template&gt;
&lt;script setup&gt;
import { ref, reactive } from &quot;vue&quot;;
let flag = ref(true)
const change = () =&gt; {
flag.value = !flag.value
}
&lt;/script&gt;
&lt;style&gt;
.myClass1 {
color: red;
}
.myClass2 {
font-size: 30px;
}
&lt;/style&gt;</code></pre>
<hr />
<ul>
<li>写法5：</li>
</ul>
<pre><code class="language-javascript">&lt;template&gt;
&lt;h1&gt;Hello Andy&lt;/h1&gt;
&lt;/template&gt;
&lt;script setup&gt;
const theme = {
color: &quot;red&quot;,
};
&lt;/script&gt;
&lt;style scoped&gt;
h1 {
color: v-bind(&quot;theme.color&quot;);
}
&lt;/style&gt;</code></pre>
<p><img src="https://www.showdoc.com.cn/server/api/attachment/visitFile?sign=5c651c7ba135fad812918838077ff6ff" alt="" /></p>