如何使用条件设置 v-layout v-select 样式？答案

【问题标题】：How to style v-layout v-select with condition?如何使用条件设置 v-layout v-select 样式？
【发布时间】：2021-10-13 18:28:29
【问题描述】：

这是我的代码：

<v-layout style="width: 230px; height: 25px; padding-left: 0">
   <v-select
      :items="regionsNames"
      v-model="defRegionName"
      @change="changeRegion(defRegionName)"
      dense
      solo
   ></v-select>
</v-layout>

有没有机会根据条件设置它的样式？ regionsNames 是数组，不是对象（必须是数组）

类似： :style="[index === productsGamersBigIndex ? {'width': '750px'} : '']"

【问题讨论】：

“根据条件设置样式”是什么意思？您想根据布尔值添加一个类还是其他什么？
是的，类似于:style="[index === productsGamersBigIndex ? {'width': '750px'} : '']"

标签： javascript html css vue.js vuejs2

【解决方案1】：

你可以试试模板字符串：

<v-layout :style="`width: 230px; height: 25px; padding-left: {(index > 0 ? '20px' : 0)}`">

你也可以绑定一个对象：

<v-layout
  :style="{
    width: '230px',
    height: '25px',
    'padding-left': index > 0 ? '20px' : 0,
  }"
>

您甚至可以使用组件中的数据对象或计算属性

【讨论】：