在运行时查看更改弹性大小

Question

我创建一个v分量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'
  })
}

完整的示例代码可以在这里找到