在前端开发中，我们常常需要根据用户的操作或者数据状态来动态调整页面的样式，这时候就需要使用动态样式表。Vue.js 提供了一些特殊的指令和语法，可以方便地实现动态样式。
Vue.js 的动态样式指令
Vue.js 提供了几个指令来处理动态样式：
v-bind:style
v-bind:style 指令可以绑定一个对象，根据对象的属性值来设置元素的样式。例如，我们可以这样设置一个元素的背景颜色：
<div v-bind:style="{ backgroundColor: 'red' }"></div>
上面的代码会将这个 div 元素的背景颜色设置为红色。
我们也可以绑定一个计算属性，根据计算属性的值来设置样式：
<div v-bind:style="{ backgroundColor: bgColor }"></div>
-- -------------------- ---- ------- ------ ------- - ------ - ------ - -------- ------ -- -- --------- - --------- - ------ ------------------ - ----- - ------- -- -- --展开代码
在上面的代码中，当 someCondition 为真时，背景颜色为红色，否则为蓝色。
v-bind:class
v-bind:class 指令可以绑定一个对象，根据对象的属性值来设置元素的 class。例如，我们可以这样设置一个元素的 class：
<div v-bind:class="{ active: isActive }"></div>
上面的代码会给这个 div 元素添加一个 active 的 class，当 isActive 的值为真时。
我们也可以绑定一个计算属性，根据计算属性的值来设置 class：
<div v-bind:class="classObject"></div>
-- -------------------- ---- ------- ------ ------- - ------ - ------ - --------- ----- -- -- --------- - ------------- - ------ - ------- -------------- ----------- --------------- -- -- -- --展开代码
在上面的代码中，当 isActive 为真时，元素会添加 active 的 class，否则会添加 text-red 的 class。
v-bind:style 和 v-bind:class 的结合使用
我们可以结合 v-bind:style 和 v-bind:class 指令来设置元素的样式和 class。例如，我们可以这样设置一个带有边框和背景颜色的按钮：
<button v-bind:style="{ backgroundColor: bgColor }" v-bind:class="{ 'border-gray': !isActive }">Click me</button>
export default { data() { return { isActive: true, bgColor: 'blue', }; }, };
在上面的代码中，当 isActive 为真时，按钮会有一个灰色的边框，背景颜色为蓝色。当 isActive 为假时，按钮没有边框，背景颜色为白色。
Vue.js 的动态样式语法
除了指令的方式，Vue.js 还提供了一些特殊的语法，可以方便地实现动态样式。
计算属性
我们可以使用计算属性来根据数据状态动态计算样式。例如，我们可以这样计算一个元素的样式：
<div :style="boxStyle"></div>
-- -------------------- ---- ------- ------ ------- - ------ - ------ - ------ ---- ------- ---- -------- ------ -- -- --------- - ---------- - ------ - ------ ------------------ ------- ------------------- ---------------- ------------- -- -- -- --展开代码
在上面的代码中，boxStyle 计算属性会根据数据状态动态计算元素的样式。
直接绑定样式对象
我们也可以直接绑定一个样式对象，来动态设置元素的样式。例如，我们可以这样设置一个带有渐变背景的元素：
<div :style="{ background: `linear-gradient(to right, ${bgColor1}, ${bgColor2})` }"></div>
export default { data() { return { bgColor1: 'red', bgColor2: 'blue', }; }, };
在上面的代码中，我们直接绑定了一个样式对象，使用了 ES6 模板字符串和 linear-gradient 函数来动态生成渐变背景。
示例代码
下面是一个使用 Vue.js 实现动态样式的示例代码：
-- -------------------- ---- ------- ---------- ----- ------- --------- ---------------- ------- -- --------- -------------- --------- -- --------------------- - -- -------- - -------- - ---------- -- --------- ---- ------------------------ ---- --------- ----------- ------------------- ------ ------------ ------------- --------- ------ ----------- -------- ------ ------- - ------ - ------ - --------- ----- -------- ------- ------ ---- ------- ---- --------- ------ --------- ------- -- -- --------- - ---------- - ------ - ------ ------------------ ------- ------------------- ---------------- ------------- -- -- -- -------- - -------------- - ------------- - --------------- -- -- -- --------- ------- ------------ - ------- --- ----- ----- - --------展开代码
在上面的代码中，我们实现了一个带有状态切换、带有边框和背景颜色的按钮，一个带有宽高和背景颜色的元素，以及一个带有渐变背景的元素。这些元素的样式都是动态计算的，根据数据状态动态生成的。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67d24817a941bf7134456bef
