Vuejs：如何根据条件给出模态大小

Question

我在页面中实现了 bootstrap-vue 模式。模态的大小为 lg 或大。对于特定的 if 条件，我希望大小为 lg ，而对于 else 条件，我希望它为 md。有没有办法使用 vuejs 属性来实现这一点。

<b-modal id="modal-1" size="lg">
  <upgrade-popup></upgrade-popup>
</b-modal>

我正在寻找一种方法，例如我们用于条件渲染类的方法

v-bind:class="{ active: isActive, 'text-danger': hasError }"

尝试了这样的条件，但它似乎不起作用。

:size="{'lg': freeUser, 'md': !freeUser}"

Answer 1

如果

:size="freeUser ? 'lg' : 'md'" 可以使用简写形式 使用速记，您可以快速创建if/else，但仅限于此。但避免了很多额外的标记。

---

计算属性

您还可以使用计算属性来缓存值。并且仅在使用的内部属性发生变化时重新计算。在这种情况下freeUser。

<b-modal :size="getSize"></b-modal>


<script>
{
  computed: {
    getSize() {
      return this.freeUser ? 'lg' : 'md'
    }
  }
}
</script>

---

方法

方法选项允许您轻松处理更多条件或更高级的情况，例如计算属性。但与计算属性不同，方法允许您传入属性，例如，如果您需要根据 v-for 中的内容处理它，这将非常有用。

<b-modal :size="getSize(freeUser)"></b-modal>


<script>
{
  methods: {
    getSize(freeUser) {
      return this.freeUser ? 'lg' : 'md'
    }
  }
}
</script>