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

Question

我想将变量分配给 Vuetify 断点。因此，与其编写xs12我想保持动态并传递组件道具，不如将其保持动态。

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

所以首先我将展示一种工作方法(使用硬编码值(

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

接下来我的动态方法

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

最后，我在道具之前:的方法

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

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

.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>

.JS

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')

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

Answer 1

你需要动态参数

<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">

或速记：

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