vuetify在运行时更改flex大小

Question

我创建了一个像这样的v-component jus：

<v-container grid-list-md >
  <v-layout row wrap>
      <v-flex xs10>

所以现在我可以在运行时将xs10更改为xs5样本（我有2个面板，每个面板都有一个文本字段，因此当我的用户从第一个面板聚焦文本时，我需要将xs6的大小增加到xs8并减少其他面板从xs6到xs4，用于样本

Answer 1

你可以像这样控制flexsize

<v-flex :xs10="true" :xs5="false">

因此，您可以创建名为firstPanelFocus的新数据，例如

 data() {
    return {
      firstPanelFocus: false
    };
  },

和v-flex

<v-flex :xs10="!firstPanelFocus" :xs5="firstPanelFocus">

每当用户关注（或模糊）特定区域时，都会更改firstPanelFocus的值

Answer 2

从Vue 2.6 (Macross)开始，您可以使用动态指令参数！

例如：

<v-flex :[dynamicFlex]="true">
  Some Text
</v-flex>

在vue实例中：

export default {
  data: () => ({
    dynamicFlex: 'xs12'
  })
}

可以找到完整的示例代码here