Vue基础教程（89）class与style绑定绑定内联样式（style）之设计隔行变色的商品表：Vue魔法课堂：Class与Style绑定大法，教你打造会“变色”的炫酷商品表！

最新推荐文章于 2025-12-02 21:41:05 发布

原创最新推荐文章于 2025-12-02 21:41:05 发布 · 253 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

Vue基础教程专栏收录该内容

219 篇文章

订阅专栏

一、为什么你的Vue表格丑得像Excel远古版本？

各位前端萌新们，相信你一定遇到过这种窘境：辛辛苦苦用Vue搭了个商品列表，结果外观堪比20年前的Excel表格，用户看了一眼就默默关掉页面...别慌，今天我要带你解锁Vue的核心魔法——class与style绑定，特别是那个能让表格“活”起来的内联样式绑定！

想象一下，你的商品表格能够根据数据状态自动变色：奇数行浅蓝，偶数行米白，鼠标悬停还有高亮效果...是不是瞬间逼格满满？这就是style绑定的魔力所在！

二、Vue样式绑定基础：给你的元素穿上“动态外衣”

在深入隔行变色之前，我们先快速过一下Vue样式绑定的基本操作。Vue给我们提供了两种给元素“穿衣服”的方式：class绑定和style绑定。

class绑定就像是给元素准备了一整个衣柜，你可以根据心情随时换衣服：

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

style绑定则更像是私人订制化妆师，直接往元素上涂抹特定样式：

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

今天我们的主角是style绑定，因为它更直接、更灵活，特别适合实现那种需要即时计算的样式效果。

三、Style绑定深度解析：从“能用到“精通”

3.1 基础绑定：对象语法

Vue的style绑定最常用的就是对象语法。来看个简单例子：

<template>
  <div>
    <!-- 直接绑定样式对象 -->
    <div :style="{ color: textColor, backgroundColor: bgColor }">
      我会变色哦！
    </div>
    
    <!-- 绑定计算属性返回的样式对象 -->
    <div :style="dynamicStyle">
      我是计算出来的样式！
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      textColor: '#fff',
      bgColor: '#3498db'
    }
  },
  computed: {
    dynamicStyle() {
      return {
        padding: '10px',
        borderRadius: '5px',
        border: `2px solid ${this.bgColor}`
      }
    }
  }
}
</script>

3.2 数组语法：样式组合技

当需要应用多个样式对象时，数组语法就派上用场了：

<template>
  <div :style="[baseStyles, overridingStyles]">
    我的样式是组合出来的！
  </div>
</template>
<script>
export default {
  data() {
    return {
      baseStyles: {
        padding: '15px',
        margin: '10px',
        fontSize: '16px'
      },
      overridingStyles: {
        backgroundColor: '#f1c40f',
        color: '#2c3e50'
      }
    }
  }
}
</script>

3.3 自动前缀：Vue的贴心小功能

Vue会自动为需要浏览器前缀的CSS属性添加前缀，比如transform：

<div :style="{ transform: 'rotate(45deg)' }">
  我会旋转，而且在不同浏览器都能正常显示！
</div>

四、实战隔行变色商品表：从0到1完整实现

好了，理论部分到此为止，现在让我们进入最激动人心的实战环节！

4.1 需求分析

我们要实现一个这样的商品表：

奇数行背景色为#f9f9f9
偶数行背景色为#e3f2fd
鼠标悬停时行背景色变为#fff3e0
价格超过100元的商品文字加粗显示
库存紧张的商品（库存少于10）文字显示为红色

4.2 数据结构设计

data() {
  return {
    products: [
      { id: 1, name: 'Vue实战指南', price: 89, stock: 15 },
      { id: 2, name: 'JavaScript高级程序设计', price: 129, stock: 8 },
      { id: 3, name: 'CSS世界', price: 69, stock: 20 },
      { id: 4, name: '深入React技术栈', price: 79, stock: 5 },
      { id: 5, name: 'Node.js开发实战', price: 99, stock: 12 }
    ],
    hoveredRow: null // 记录鼠标悬停的行
  }
}

4.3 核心样式计算逻辑

computed: {
  // 表格基础样式
  tableStyle() {
    return {
      width: '100%',
      borderCollapse: 'collapse',
      fontFamily: 'Arial, sans-serif'
    }
  }
},
methods: {
  // 获取行样式
  getRowStyle(product, index) {
    const baseStyle = {
      transition: 'all 0.3s ease',
      cursor: 'pointer'
    }
    
    // 隔行变色
    const rowColor = index % 2 === 0 ? '#f9f9f9' : '#e3f2fd'
    
    // 鼠标悬停效果
    const hoverStyle = this.hoveredRow === index ? { backgroundColor: '#fff3e0' } : { backgroundColor: rowColor }
    
    // 组合基础样式和悬停样式
    return Object.assign({}, baseStyle, hoverStyle)
  },
  
  // 获取单元格样式
  getCellStyle(product) {
    const style = {
      padding: '12px',
      borderBottom: '1px solid #ddd',
      textAlign: 'left'
    }
    
    // 价格超过100加粗
    if (product.price > 100) {
      style.fontWeight = 'bold'
    }
    
    // 库存紧张变红色
    if (product.stock < 10) {
      style.color = '#e74c3c'
    }
    
    return style
  },
  
  // 处理鼠标事件
  handleMouseEnter(index) {
    this.hoveredRow = index
  },
  
  handleMouseLeave() {
    this.hoveredRow = null
  }
}

4.4 完整模板实现

<template>
  <div class="product-table-container">
    <h2>智能变色商品列表</h2>
    <p>试试把鼠标放在行上，有惊喜！</p>
    
    <table :style="tableStyle">
      <thead>
        <tr>
          <th style="padding: 12px; border-bottom: '2px solid #3498db'">ID</th>
          <th style="padding: 12px; border-bottom: '2px solid #3498db'">商品名称</th>
          <th style="padding: 12px; border-bottom: '2px solid #3498db'">价格</th>
          <th style="padding: 12px; border-bottom: '2px solid #3498db'">库存</th>
        </tr>
      </thead>
      <tbody>
        <tr 
          v-for="(product, index) in products" 
          :key="product.id"
          :style="getRowStyle(product, index)"
          @mouseenter="handleMouseEnter(index)"
          @mouseleave="handleMouseLeave"
        >
          <td :style="getCellStyle(product)">{{ product.id }}</td>
          <td :style="getCellStyle(product)">{{ product.name }}</td>
          <td :style="getCellStyle(product)">¥{{ product.price }}</td>
          <td :style="getCellStyle(product)">
            <span :style="{ 
              color: product.stock < 5 ? '#c0392b' : '#27ae60',
              fontWeight: product.stock < 5 ? 'bold' : 'normal'
            }">
              {{ product.stock }}件
            </span>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

4.5 添加一些美化样式

<style scoped>
.product-table-container {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}

h2 {
  color: #2c3e50;
  text-align: center;
  margin-bottom: 10px;
}

p {
  text-align: center;
  color: #7f8c8d;
  margin-bottom: 20px;
}

table {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  overflow: hidden;
}

th {
  background-color: #3498db;
  color: white;
  font-weight: bold;
}
</style>

五、进阶技巧：让你的样式绑定更上一层楼

5.1 响应式样式适配

让你的表格在不同屏幕尺寸下都能完美显示：

methods: {
  getResponsiveStyle() {
    const screenWidth = window.innerWidth
    if (screenWidth < 768) {
      return {
        fontSize: '14px',
        padding: '8px'
      }
    } else {
      return {
        fontSize: '16px', 
        padding: '12px'
      }
    }
  }
}

5.2 性能优化建议

当处理大量数据时，避免在模板中直接写复杂的样式计算：

// 不推荐：每次渲染都会重新计算
<tr :style="{ backgroundColor: index % 2 === 0 ? '#f9f9f9' : '#e3f2fd' }">

// 推荐：使用计算属性或方法
computed: {
  precomputedStyles() {
    return this.products.map((product, index) => this.getRowStyle(product, index))
  }
}