Vue 3中如何避免动态设置的内边距样式被自动合并？

要让每个方向的内边距样式保持独立不被合并，有两种实用方法：

方法一：使用对象形式绑定style #

放弃数组写法，改用键值对形式的对象绑定，Vue会直接把每个属性渲染成独立的样式规则，不会做合并优化：

<div :style="{ 'padding-top': '3px', 'padding-right': '32px', 'padding-bottom': '3px', 'padding-left': '32px' }"></div>

渲染后就能得到你想要的结果：

<div style="padding-top: 3px; padding-right: 32px; padding-bottom: 3px; padding-left: 32px"></div>

方法二：给数组内的样式加唯一标识打断合并 #

如果一定要用数组形式，可以给每个样式字符串加一个唯一的自定义CSS变量，让Vue无法识别这些规则属于同一属性组，从而避免合并：

<div :style="[
  'padding-top: 3px; --unique-1: 0',
  'padding-right: 32px; --unique-2: 0',
  'padding-bottom: 3px; --unique-3: 0',
  'padding-left: 32px; --unique-4: 0'
]"></div>

自定义变量的名称和值只要保证每个都不一样就行，不会影响页面样式，最终渲染出来每个padding属性都会独立存在。

补充说明 #

Vue在处理数组形式的style绑定时，会对CSS规则做归一化合并，把同属padding组的方向属性合并成简写形式；而对象形式是逐个处理每个样式属性，不会触发这个合并逻辑。

内容的提问来源于stack exchange，提问作者Sergs Ill