03 Vue样式绑定

样式绑定

5.1 class 绑定

语法详解

<!-- 1. 字符串语法 -->
<div :class="className"></div>
<!-- className: 'active' -->

<!-- 2. 对象语法 -->
<div :class="{ active: isActive, 'text-danger': hasError }"></div>
<!-- 根据条件添加/移除类 -->

<!-- 3. 数组语法 -->
<div :class="[baseClass, activeClass]"></div>
<!-- 应用多个类 -->

<!-- 4. 混合语法 -->
<div :class="['btn', { 'btn-primary': isPrimary }]"></div>

<!-- 5. 在组件上使用 -->
<MyComponent :class="{ active: isActive }" />

应用场景

<template>
  <!-- 按钮状态 -->
  <button :class="{
    'btn': true,
    'btn-primary': type === 'primary',
    'btn-disabled': disabled,
    'btn-loading': loading
  }">
    提交
  </button>
  
  <!-- 表单验证状态 -->
  <input :class="{
    'form-control': true,
    'is-valid': isValid,
    'is-invalid': hasError,
    'is-dirty': isDirty
  }" v-model="value">
  
  <!-- 主题切换 -->
  <div :class="['app', theme, { 'mobile': isMobile }]">
    内容
  </div>
</template>

5.2 style 绑定

语法详解

<!-- 1. 对象语法 -->
<div :style="{ color: textColor, fontSize: size + 'px' }"></div>

<!-- 2. 数组语法 -->
<div :style="[baseStyles, overridingStyles]"></div>

<!-- 3. 自动添加前缀 -->
<div :style="{ transform: 'scale(' + scale + ')' }"></div>
<!-- Vue 会自动添加浏览器前缀 -->

<!-- 4. 多重值 -->
<div :style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }"></div>
<!-- 浏览器支持哪个用哪个 -->

应用场景

<template>
  <!-- 动态宽度 -->
  <div :style="{ width: progress + '%' }" class="progress-bar"></div>
  
  <!-- 响应式位置 -->
  <div :style="{
    left: x + 'px',
    top: y + 'px',
    transform: `rotate(${angle}deg)`
  }" class="draggable"></div>
  
  <!-- 主题颜色 -->
  <div :style="{
    '--primary-color': primaryColor,
    '--secondary-color': secondaryColor
  }" class="theme-container">
    内容
  </div>
  
  <!-- 动画控制 -->
  <div :style="{
    opacity: isVisible ? 1 : 0,
    transition: `opacity ${duration}s ease`
  }" class="fade-element"></div>
</template>