【vuejs】vue2 class和style基础讲解和项目实战使用

最新推荐文章于 2024-08-29 15:22:59 发布

生活、追梦者

最新推荐文章于 2024-08-29 15:22:59 发布

阅读量1.1k

点赞数 15

分类专栏： vue 文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/weixin_45046532/article/details/140458028

版权

vue 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

1. Vue2 class 绑定

1.1 绑定基础

Vue.js 2 允许开发者通过 v-bind 指令来绑定 HTML 的 class 属性。这种绑定可以通过对象语法或数组语法实现，使得动态添加、移除或切换元素的 CSS 类变得简单而直观。

1.2 对象语法

对象语法提供了一种声明式的方式来动态切换 class。通过一个 JavaScript 对象，我们可以根据数据属性的真值性来添加或删除类。

<div v-bind:class="{ active: isActive, 'text-danger': hasError }"></div>

在上面的例子中，active 类会根据 isActive 的真值性添加到 div 元素上，而 text-danger 类则依赖于 hasError 的值。

1.3 数组语法

数组语法允许我们列出多个类，这些类将被同时应用到元素上。我们也可以在数组中使用三元表达式来根据条件添加类。

<div v-bind:class="[activeClass, errorClass]"></div>

在这个例子中，activeClass 和 errorClass 将被同时添加到 div 元素上，无论它们是否满足条件。

1.4 组件上的 class 绑定

在 Vue 组件中使用 class 属性时，这些类将被添加到组件的根元素上，并且不会覆盖元素上已有的类。

<my-component class="my-class"></my-component>

这将渲染为：

<p class="foo bar my-class">Hi</p>

如果组件内部的模板定义了 class="foo bar"，外部传入的 class 将与之合并。

1.5 内联样式的绑定

除了 class 绑定，Vue 2 还允许我们绑定内联样式。这可以通过 v-bind:style 实现，支持对象语法和数组语法。

<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>

在这个例子中，div 元素的 style 属性将根据 activeColor 和 fontSize 的值动态更新。

1.6 自动前缀

Vue 2 会在需要时自动为 CSS 属性添加浏览器引擎前缀，例如 transform 属性。

1.7 样式的多重值

从 Vue 2.3.0+ 开始，我们可以为 style 绑定中的属性提供包含多个值的数组，这在处理需要多个前缀的 CSS 属性时非常有用。

<div :style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }"></div>

这个例子中，将根据浏览器的支持情况，渲染适当的 display 属性值。

2. Vue2 style 绑定

Vue.js 2.x 版本中，v-bind 指令用于将元素的属性绑定到 Vue 实例的数据上。在处理 class 和 style 属性时，Vue 提供了特殊的绑定方式，使得动态操作这些属性更加灵活和强大。

2.1 对象语法

在 Vue 2.x 中，class 和 style 可以通过对象语法进行绑定。这种方式允许你将多个属性动态地应用到元素上。

<!-- class 对象语法 -->
<div v-bind:class="{ active: isActive, 'text-danger': hasError }"></div>

在这个例子中，active 类会根据 isActive 的值动态添加或移除，而 text-danger 类会根据 hasError 的值动态切换。

2.2 数组语法

除了对象语法，Vue 2.x 还支持数组语法来绑定 class 和 style。

<!-- class 数组语法 -->
<div v-bind:class="[activeClass, errorClass]"></div>

这里，activeClass 和 errorClass 是两个变量，它们分别存储类名字符串。数组中的每个项都会根据其值动态添加到元素的 class 属性上。

2.3 自动前缀

Vue 2.x 在处理需要浏览器厂商前缀的 CSS 属性时，如 transform 或 transition，会自动添加相应的前缀。这意味着开发者不需要手动添加这些前缀，Vue 会根据当前浏览器自动处理。

<!-- style 绑定 -->
<div v-bind:style="{ transform: 'rotate(10deg)' }"></div>

在这个例子中，如果需要，Vue 会自动为 transform 属性添加浏览器前缀。

2.4 内联样式的动态绑定

style 绑定同样支持对象和数组语法，允许你动态地设置元素的内联样式。

<!-- 内联样式对象语法 -->
<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>

在这个例子中，activeColor 和 fontSize 是数据属性，它们会根据其值动态更新元素的样式。如果 fontSize 是一个数值，Vue 会自动将其转换为字符串，并附加 ‘px’ 单位。

2.5 组件上的绑定

在自定义组件上使用 class 和 style 绑定时，这些绑定会应用到组件的根元素上，而不会覆盖已有的类或样式。

<!-- 组件上的 class 绑定 -->
<my-component class="my-class" v-bind:class="{ active: isActive }"></my-component>

这会将 my-class 和根据 isActive 动态添加的 active 类应用到 my-component 的根元素上。同样的规则适用于 style 绑定。

3. 使用场景与示例

3.1 动态类绑定

在Vue 2中，class和style属性的动态绑定是常见的使用场景。通过使用v-bind:class或其缩写:class，可以基于组件的状态动态添加或移除CSS类。

例如，假设我们有一个按钮，其激活状态由数据属性isActive控制：

<template>
  <button :class="{ active: isActive }">Click me</button>
</template>

<script>
export default {
  data() {
    return {
      isActive: false
    };
  },
  methods: {
    toggleActive() {
      this.isActive = !this.isActive;
    }
  }
};
</script>

在这个例子中，当isActive为true时，按钮将具有active类，从而可能改变其样式。

3.2 对象语法的高级用法

对象语法不仅可以用来绑定单个类，还可以结合多个条件来动态绑定多个类。这在处理复杂的条件逻辑时非常有用。

例如，假设我们要根据两个数据属性hasError和isDisabled来动态绑定类：

<template>
  <div :class="{ active: isActive, 'text-danger': hasError, disabled: isDisabled }">
    Content
  </div>
</template>

<script>
export default {
  data() {
    return {
      isActive: true,
      hasError: false,
      isDisabled: false
    };
  }
};
</script>

在这个例子中，div元素将根据isActive、hasError和isDisabled的值动态地拥有active、text-danger或disabled类。

3.3 数组语法的使用

数组语法允许你将多个类作为一个列表应用到元素上，并且可以通过三元表达式来条件性地包含某些类。

例如，如果我们要根据isActive的状态来切换类列表中的active类：

<template>
  <div :class="[activeClass, errorClass, isActive ? activeClass : '']">
    Content
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeClass: 'active',
      errorClass: 'text-danger'
    };
  }
};
</script>

在这个例子中，activeClass将始终被应用，但active类将根据isActive的值条件性地添加或移除。

3.4 内联样式的绑定

style属性也可以通过v-bind:style或其缩写:style进行动态绑定。这允许你根据组件的状态动态地改变元素的样式。

例如，假设我们要根据数据属性fontSize和activeColor来动态设置样式：

<template>
  <div :style="styleObject">Styled content</div>
</template>

<script>
export default {
  data() {
    return {
      styleObject: {
        fontSize: '16px',
        color: 'black'
      }
    };
  }
};
</script>

在这个例子中，div的fontSize和color将根据styleObject对象的值进行动态设置。

3.5 组件中的类和样式绑定

在自定义组件中使用class和style绑定时，这些绑定将应用于组件的根元素，并且不会覆盖已存在的类或样式。

例如，如果我们有一个自定义组件my-component，并希望动态地添加类：

<template>
  <my-component :class="{ active: isActive }">Content</my-component>
</template>

<script>
import MyComponent from './MyComponent.vue';

export default {
  components: {
    MyComponent
  },
  data() {
    return {
      isActive: true
    };
  }
};
</script>

在这个例子中，如果isActive为true，则my-component组件的根元素将拥有active类。

4. 总结

Vue 2中的class和style绑定提供了灵活而强大的数据绑定功能，允许开发者以声明式的方式动态地操作元素的CSS类和内联样式。通过对象语法和数组语法，Vue使得根据组件状态切换类和应用样式变得简洁而直观。

对象语法：通过传递一个对象给v-bind:class或v-bind:style，可以基于数据属性的真值动态添加或移除CSS类和样式。这种方式非常适合处理单一或少量条件的绑定。
数组语法：允许将多个类或样式对象组合应用到元素上，适合处理更复杂或多个条件的绑定情况。数组中的每个元素可以是字符串或对象，Vue会自动处理它们并将结果应用于元素。
组件支持：Vue 2的类和样式绑定同样适用于组件的根元素，可以与组件的固有类合并，为开发者提供了组件样式定制的灵活性。

Vue 2的这些特性不仅提高了开发效率，还增强了模板的可读性和维护性。开发者可以利用这些数据绑定的特性，构建出响应式且用户界面交互丰富的应用程序。此外，Vue 2的自动前缀添加和样式多值特性，进一步简化了对现代CSS特性的使用，确保了应用的兼容性和先进性。