vue2 动态实现li的最小间距10px 最大间距32px

要动态实现Vue2 UI Li的最小间距为10px，最大间距为32px，你可以使用计算属性和绑定class的方式来实现。具体步骤如下：

1. 在data中定义一个变量，比如叫做spacing，用来存储当前li的间距大小。

2. 在computed中定义一个计算属性，比如叫做liClass，用来动态计算li元素的class属性。 liClass的计算方法如下：

liClass() {
  return this.spacing >= 10 && this.spacing <= 32 ? `li-${this.spacing}` : 'li-10';
}

这个计算属性会根据当前的spacing的大小动态地计算出li元素的class属性。如果spacing值在10到32之间，则返回"li-spacing"的class名，否则返回"li-10"的class名。

3. 在模板中绑定li元素的class属性，并将liClass计算属性绑定到class属性上：

<template>
  <div>
    <ul>
      <li :class="liClass">Item 1</li>
      <li :class="liClass">Item 2</li>
      <li :class="liClass">Item 3</li>
      ...
    </ul>
  </div>
</template>

这样就可以根据spacing的值动态地给li元素设置不同的class名了，从而实现最小间距10px，最大间距32px的效果。

4. 最后，你需要在需要改变spacing的时候，动态地修改它的值。这可以通过事件或者其他方式来触发，例如：

methods: {
  increaseSpacing() {
    if (this.spacing < 32) {
      this.spacing += 2;
    }
  },
  decreaseSpacing() {
    if (this.spacing > 10) {
      this.spacing -= 2;
    }
  },
}

这样，你就可以通过调用increaseSpacing或者decreaseSpacing方法来动态地改变spacing的值了。在spacing的值改变后，计算属性会重新计算li元素的class属性，并且li元素的间距也会随之改变。