vue 动态 分屏样式

你可以使用 Vue 的动态绑定来实现动态分屏样式。首先，在你的 Vue 组件中，创建一个变量来存储分屏样式的值，例如：

data() {
  return {
    splitStyle: '50%'
  };
}

然后，你可以在模板中使用这个变量来动态设置分屏样式，例如：

<div class="split-container" :style="{ width: splitStyle }">
  <div class="split-pane">
    <!-- 左侧内容 -->
  </div>
  <div class="split-pane">
    <!-- 右侧内容 -->
  </div>
</div>

在上面的示例中，通过使用 `:style` 绑定，将 `splitStyle` 变量的值动态应用到 `split-container` 元素的宽度上。

最后，你可以通过修改 `splitStyle` 变量的值来改变分屏的样式，例如：

methods: {
  changeSplitStyle() {
    this.splitStyle = '70%';
  }
}

你可以在需要的时候调用 `changeSplitStyle` 方法来改变分屏样式。这样，当 `splitStyle` 的值变为 `'70%'` 时，分屏的样式将相应地更新为 70% 的宽度。

希望这个示例能够帮助到你！