vue动态绑定style

1. 静态绑定内联样式

v-bind:style 的对象语法十分直观，CSS属性名可以用驼峰式 (camelCase) 或短横线分隔 (kebab-case，记得用引号括起来) 来命名：

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

data: {
  activeColor: 'red',
  fontSize: 30
}

直接绑定到一个样式对象通常更好，这会让模板更清晰：

<div v-bind:style="styleObject"></div>

data: {
  styleObject: {
    color: 'red',
    fontSize: '13px'
  }
}

2. 动态绑定内联样式

本文以CSS Grid 网格布局教程为例，解释如何用传参的形式，动态绑定内联样式

根据教程写了一个grid示例的demo，供参考

2.1 使用计算属性computed

对象语法常常结合返回对象的计算属性使用。

计算属性系统自己会执行前一层函数，所以需要以函数的形式返回样式，直接返回对象需要加括号，不加括号就认为是箭头函数的大括号了。

<div class="container">
  <div 
    v-for="(item, index) in items" 
    :key="index" 
    class="item" 
    :style="itemObject(item)"
  >
    {{ item.name }}
  </div>
</div>

data() {
  return {
    items: [
      {
        'name': 'PWR_1',
        'background': '#e5e4e9',
        'columnStart': 1,
        'columnEnd': 2,
        'rowStart': 1,
        'rowEnd': 2
      },
      {
        'name': 'FAN_1',
        'background': '#e5e4e9',
        'columnStart': 2,
        'columnEnd': 3,
        'rowStart': 1,
        'rowEnd': 2
      },
      {
        'name': 'FAN_2',
        'background': '#e5e4e9',
        'columnStart': 3,
        'columnEnd': 4,
        'rowStart': 1,
        'rowEnd': 2
      },
      {
        'name': 'PWR_2',
        'background': '#e5e4e9',
        'columnStart': 4,
        'columnEnd': 5,
        'rowStart': 1,
        'rowEnd': 2
      },
      {
        'name': '100',
        'background': '#5f9ea0',
        'columnStart': 1,
        'columnEnd': 5,
        'rowStart': 2,
        'rowEnd': 3
      }
    ]
  }
},
computed: {
  itemObject(item) {
    return (item) => ({
      backgroundColor: item.background,
      gridColumnStart: item.columnStart,
      gridColumnEnd: item.columnEnd,
      gridRowStart: item.rowStart,
      gridRowEnd: item.rowEnd
    })
  }
}

.container {
  display: grid;
  grid-template-columns: repeat(4, 25%);
  grid-template-rows: repeat(2, 30px);
}

.item {
  font-size: 12px;
  text-align: center;
  border: 1px solid white;
  display: flex;
  justify-content: center;
  align-items: center;
}

2.2 使用方法methods(不推荐使用)

<div class="container">
  <div 
    v-for="(item, index) in items" 
    :key="index" 
    class="item" 
    :style="itemObject(item)"
  >
    {{ item.name }}
  </div>
</div>

data() {
  return {
    items: [
      {
        'name': 'PWR_1',
        'background': '#e5e4e9',
        'columnStart': 1,
        'columnEnd': 2,
        'rowStart': 1,
        'rowEnd': 2
      },
      {
        'name': 'FAN_1',
        'background': '#e5e4e9',
        'columnStart': 2,
        'columnEnd': 3,
        'rowStart': 1,
        'rowEnd': 2
      },
      {
        'name': 'FAN_2',
        'background': '#e5e4e9',
        'columnStart': 3,
        'columnEnd': 4,
        'rowStart': 1,
        'rowEnd': 2
      },
      {
        'name': 'PWR_2',
        'background': '#e5e4e9',
        'columnStart': 4,
        'columnEnd': 5,
        'rowStart': 1,
        'rowEnd': 2
      },
      {
        'name': '100',
        'background': '#5f9ea0',
        'columnStart': 1,
        'columnEnd': 5,
        'rowStart': 2,
        'rowEnd': 3
      }
    ]
  }
},
methods: {
  itemObject(item) {
    return {
      backgroundColor: item.background,
      gridColumnStart: item.columnStart,
      gridColumnEnd: item.columnEnd,
      gridRowStart: item.rowStart,
      gridRowEnd: item.rowEnd
    }
  }
}

.container {
  display: grid;
  grid-template-columns: repeat(4, 25%);
  grid-template-rows: repeat(2, 30px);
}

.item {
  font-size: 12px;
  text-align: center;
  border: 1px solid white;
  display: flex;
  justify-content: center;
  align-items: center;
}

2.3 使用过滤器filters

<div class="container">
  <div 
    v-for="(item, index) in items" 
    :key="index" 
    class="item" 
    :style="item | itemClassFilter"
  >
    {{ item.name }}
  </div>
</div>

filters: {
  itemClassFilter(item) {
    return {
      backgroundColor: item.background,
      gridColumnStart: item.columnStart,
      gridColumnEnd: item.columnEnd,
      gridRowStart: item.rowStart,
      gridRowEnd: item.rowEnd
    }
  }
},
data() {
  return {
    items: [
      {
        'name': 'PWR_1',
        'background': '#e5e4e9',
        'columnStart': 1,
        'columnEnd': 2,
        'rowStart': 1,
        'rowEnd': 2
      },
      {
        'name': 'FAN_1',
        'background': '#e5e4e9',
        'columnStart': 2,
        'columnEnd': 3,
        'rowStart': 1,
        'rowEnd': 2
      },
      {
        'name': 'FAN_2',
        'background': '#e5e4e9',
        'columnStart': 3,
        'columnEnd': 4,
        'rowStart': 1,
        'rowEnd': 2
      },
      {
        'name': 'PWR_2',
        'background': '#e5e4e9',
        'columnStart': 4,
        'columnEnd': 5,
        'rowStart': 1,
        'rowEnd': 2
      },
      {
        'name': '100',
        'background': '#5f9ea0',
        'columnStart': 1,
        'columnEnd': 5,
        'rowStart': 2,
        'rowEnd': 3
      }
    ]
  }
}

.container {
  display: grid;
  grid-template-columns: repeat(4, 25%);
  grid-template-rows: repeat(2, 30px);
}

.item {
  font-size: 12px;
  text-align: center;
  border: 1px solid white;
  display: flex;
  justify-content: center;
  align-items: center;
}