javascript - 在Vuejs中动态切换flex大小？

Question

我正在尝试使用 Vuejs 切换 Flex 大小。我有三个单选按钮和一个选择按钮。我如何做到这样，当我在 XS4 单选按钮上选择时，选择采用 XS4 的弹性大小。 XS6 和 XS12 分别相同。

我创建了一个 Codepen https://codepen.io/anon/pen/agzoNE .

    <div id="app">
    <v-app id="inspire">
    <v-radio-group row v-model="radioGroup">
    <v-radio label="XS4" value="XS4"></v-radio>
    <v-radio label="XS6" value="XS6"></v-radio>
    <v-radio label="XS12" value="XS12"></v-radio>
     </v-radio-group>
  <v-select placeholder="How to Dynamically change the flex size for this 
select?"></v-select>
</v-app>
</div>


  new Vue({
  el:'#app',
   data(){
   return{
    radioGroup: 1,
  }
 }
 })

提前谢谢您。

Answer 1

因此，将单选按钮的值更改为小写，用 v-layout 和 v-flex 包装 v-select，然后将 v-flex 的类绑定(bind)到 radioGroup。

<v-layout row>
    <v-flex :class="radioGroup">
        <v-select placeholder="How to Dynamically change the flex size for this select?" ></v-select>
    </v-flex>
</v-layout>

Codepen