将变量分配给模板中的断点答案

【问题标题】：assign variables to breakpoints in template将变量分配给模板中的断点
【发布时间】：2020-04-07 22:28:15
【问题描述】：

我想将变量分配给 Vuetify 断点。所以我不想写xs12，而是让它保持动态并传入一个组件属性。

我尝试通过xs="myVariable" 和:xs="myVariable" 分配一个变量。不幸的是，这两种方法都不起作用。

所以首先我将展示一个工作方法应该如何（使用硬编码值）

https://codepen.io/dunnobutmaybelater/pen/MWYjVPV

接下来我的动态方法

https://codepen.io/dunnobutmaybelater/pen/MWYjVqV

最后我在道具前使用: 的方法

https://codepen.io/dunnobutmaybelater/pen/povELOd

codepen中的代码很小，所以我也将它发布在这里：

HTML

<script type="text/x-template" id="app-template">
  <v-app>
    <v-content>
      <v-container fluid fill-height>
        <v-layout align-center justify-center>
          <v-flex xs="xs" sm="sm" md="md" lg="lg" xl="xl">
            <v-card>
              <v-card-text>
                I'm completely centered
              </v-card-text>
            </v-card>
          </v-flex>
        </v-layout>
      </v-container>
    </v-content>
  </v-app>
</script>

<div id="app"></div>

const App = {
  template: '#app-template',
  data: () => ({
    xs: 12,
    sm: 10,
    md: 8,
    lg: 6,
    xl: 4
  })
}

new Vue({
  vuetify: new Vuetify(),
  render: h => h(App)
}).$mount('#app')

如何使用动态变量分配这些值？

【问题讨论】：

标签： vue.js vuetify.js

【解决方案1】：

你需要dynamic arguments

<v-flex
  :[`xs${xs}`]="true"
  :[`sm${sm}`]="true"
  :[`md${md}`]="true"
  :[`lg${lg}`]="true"
  :[`xl${xl}`]="true"
>

旧组件只是将它们的属性转换为类，所以这也可以：

<v-flex :class="['xs' + xs, 'sm' + sm, 'md' + md, 'lg' + lg, 'xl' + xl]">

或者使用新的网格组件（v-layout/v-flex -> v-row/v-col）：

<v-col :cols="xs" :sm="sm" :md="md" :lg="lg" :xl="xl">

或shorthand：

<v-col v-bind="{ cols: xs, sm, md, lg, xl }">

【讨论】：