vue3的setup 更新css用v-buid 动态更新grid布局样式

可以使用Vue3的响应式数据和计算属性来动态更新CSS，同时使用v-bind来绑定样式。以下是一个示例：

<template>
  <div>
    <div :style="gridStyle">
      <div v-for="(item, index) in items" :key="index">{{ item }}</div>
    </div>
    <button @click="changeGrid">Change Grid</button>
  </div>
</template>

<script>
import { ref, reactive, computed } from 'vue'

export default {
  setup() {
    const items = ref(['Item 1', 'Item 2', 'Item 3'])
    const gridColumns = ref(3)
    const gridGap = ref('10px')

    const gridStyle = computed(() => {
      return {
        display: 'grid',
        gridTemplateColumns: `repeat(${gridColumns.value}, 1fr)`,
        gridGap: gridGap.value
      }
    })

    function changeGrid() {
      gridColumns.value = gridColumns.value === 3 ? 2 : 3
      gridGap.value = gridGap.value === '10px' ? '20px' : '10px'
    }

    return {
      items,
      gridStyle,
      changeGrid
    }
  }
}
</script>

在这个示例中，我们使用了`ref`和`reactive`来创建响应式数据，使用`computed`来计算样式对象，并使用`v-bind`绑定样式到HTML元素上。当点击按钮时，`changeGrid`函数会更新`gridColumns`和`gridGap`的值，从而更新计算属性`gridStyle`的值，进而更新样式。

当然，上面的示例只是一个简单的演示，实际应用中可能需要更复杂的CSS样式和更多的响应式数据。