Vue中的class和style绑定

深藏阁楼爱情的钟 2024-02-05 23:30 45阅读 0赞

**聚沙成塔·每天进步一点点**

#### 本文内容 ####

*  ⭐ 专栏简介
 *   *  动态绑定class
     *   *  对象语法
         *  数组语法
     *  动态绑定style
     *   *  对象语法
         *  多重值
 *  ⭐ 写在最后

## ⭐ 专栏简介 ##

**Vue学习之旅的奇妙世界** 欢迎大家来到 Vue 技能树参考资料专栏！创建这个专栏的初衷是为了帮助大家更好地应对 Vue.js 技能树的学习。每篇文章都致力于提供清晰、深入的参考资料，让你能够更轻松、更自信地理解和掌握 Vue.js 的核心概念和技术。订阅这个专栏，让我们一同踏上更深入的 Vue学习之旅！为你的前端技能树添砖加瓦！

![在这里插入图片描述][a5e6aa42c7844913a798169ab9707994.png_pic_center]

--------------------

在Vue中，我们可以使用 `v-bind` 指令来动态绑定 HTML 元素的 `class` 和 `style` 属性。这使得我们能够根据组件的状态或数据的变化来动态修改元素的样式。

### 动态绑定class ###

#### 对象语法 ####

<template>
      <div :class="{ active: isActive, 'text-bold': isBold }">
        Dynamic Class Binding
      </div>
    </template>
    
    <script>
    export default {
      data() {
        return {
          isActive: true,
          isBold: false,
        };
      },
    };
    </script>

在上述例子中，`:class` 后面跟着一个对象，对象的键是类名，值是一个布尔值。只有当布尔值为 `true` 时，对应的类名才会被添加到元素上。这使得我们可以根据组件的状态动态添加或移除类名。

#### 数组语法 ####

<template>
      <div :class="[activeClass, boldClass]">
        Dynamic Class Binding with Arrays
      </div>
    </template>
    
    <script>
    export default {
      data() {
        return {
          isActive: true,
          isBold: false,
        };
      },
      computed: {
        activeClass() {
          return this.isActive ? 'active' : '';
        },
        boldClass() {
          return this.isBold ? 'text-bold' : '';
        },
      },
    };
    </script>

在这个例子中，`:class` 后面跟着一个数组，数组的元素是类名。通过计算属性，我们可以根据组件的状态返回一个类名的数组，然后这些类名都会被添加到元素上。

### 动态绑定style ###

#### 对象语法 ####

<template>
      <div :style="{ color: textColor, fontSize: textSize + 'px' }">
        Dynamic Style Binding
      </div>
    </template>
    
    <script>
    export default {
      data() {
        return {
          textColor: 'red',
          textSize: 16,
        };
      },
    };
    </script>

`:style` 后面跟着一个对象，对象的键是样式属性，值是样式的值。这样，我们可以根据组件的状态动态设置元素的样式。

#### 多重值 ####

<template>
      <div :style="{ color: textColor, fontSize: textSize + 'px', ...customStyles }">
        Dynamic Style Binding with Multiple Values
      </div>
    </template>
    
    <script>
    export default {
      data() {
        return {
          textColor: 'red',
          textSize: 16,
          customStyles: {
            backgroundColor: 'lightblue',
            fontWeight: 'bold',
          },
        };
      },
    };
    </script>

在这个例子中，我们使用 `...customStyles` 将一个包含多个样式的对象展开，这样可以方便地组合多个样式对象。

通过这些动态绑定 `class` 和 `style` 的方式，我们可以根据组件的状态或数据的变化来灵活地调整元素的样式，使得页面的展示更加丰富和动态。

--------------------

## ⭐ 写在最后 ##

欢迎来到《Vue技能树专栏》！本专栏旨在帮助您全面深入地掌握Vue.js，一款现代、灵活且强大的JavaScript框架。无论您是初学者还是有一定经验的开发者，这里都将为您提供详细的指导、实用的技巧以及深入的理解，助您在Vue.js世界中游刃有余。如果文中出现有瑕疵的地方各位可以通过主页的左侧联系我指正，我们一起进步，

[a5e6aa42c7844913a798169ab9707994.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/30/2ecd6ff6942e481e9e12178e23b8c998.png