来自 Prop 变量的 Vue 条件类答案

【问题标题】：Vue Conditional Classes from Prop Variable来自 Prop 变量的 Vue 条件类
【发布时间】：2021-06-15 23:47:15
【问题描述】：

所以，目前，我的 home.vue 页面上有一组单选按钮，并绑定到这样的子组件 -

<div class="radio-toolbar prev-selector">

  <input type="radio" id="one" value="Default" v-model="preview" />
  <label for="one">Default</label>

  <input type="radio" id="two" value="Padded" v-model="preview" />
  <label for="two">Padded</label>

  <input type="radio" id="three" value="Full" v-model="preview" />
  <label for="three">Full</label>

  <span>Picked: {{ preview }}</span>

</div>

<div class="media-wrapper">
  <CardStyle 
    v-bind:card="this.preview"
  />
</div>

然后将“预览”数据传递给 CardStyle Prop。道具将其作为 ['card'] 接收，我可以在我的组件中使用数据。

但是，我想知道如何将“this.preview”（可能是“默认”、“填充”或“完整”）的潜在值用作子组件的动态类，而无需将它们转换为真/假结果和使用 -

:class="{ default: isDefault, padded: isPadded, full: isFull }"

（我已经准备好使用名为 .default、.padded 和 .full 的类，只要它像以某种方式传递数据一样简单。）

【问题讨论】：

不知道您的组件是否有多个根元素，但检查this parte of the doc 可能会清除您的思路。

标签： vue.js vuejs2

【解决方案1】：

只要this.preview 有你要使用的类名的值，就用:class="this.preview"。

【讨论】：

【解决方案2】：

我构建了几个示例组件来演示如何解决您的问题。

父.vue

<template>
  <div class="parent">
    <h5>Select Card Style</h5>
    <div class="row">
      <div class="col-md-6">
        <div class="form-check">
          <input class="form-check-input" type="radio" id="one" value="default" v-model="preview" />
          <label class="form-check-label" for="one">Default</label>
        </div>
        <div class="form-check">
          <input class="form-check-input" type="radio" id="two" value="padded" v-model="preview" />
          <label class="form-check-label" for="two">Padded</label>
        </div>
        <div class="form-check">
          <input class="form-check-input" type="radio" id="three" value="full" v-model="preview" />
          <label class="form-check-label" for="three">Full</label>
        </div>
      </div>
    </div>
    <card-style :preview="preview" />
  </div>
</template>

<script>
  import CardStyle from './CardStyle.vue'

  export default {
    components: {
      CardStyle
    },
    data() {
      return {
        preview: 'default'
      }
    }
  }
</script>

CardStyle.vue

<template>
  <div class="card-style">
    <hr>
    <div class="row">
      <div class="col-md-6">
        <span :class="preview">{{ preview }} Card Style</span>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    props: {
      preview: {
        type: String,
        required: true
      }
    },
  }
</script>

<style scoped>
  .default {
    background-color: burlywood;
  }

  .padded {
    background-color:lightskyblue
  }

  .full {
    background-color:lightcoral
  }
</style>

【讨论】：

【解决方案3】：

您可以在组件中为您的字段类构建一个计算变量。这将允许您根据自己的条件或案例选择或定义要使用的类。

    computed: {
      myclasses() {
        return [
            'class1',
            'class2',
            [this.condition ? 'class3' : 'class4'],
            { class5: this.othercondition },
        ];
      },
   },

然后，只需将其用作您的模板：

<div :class="myclasses"></div>

【讨论】：