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

Question

我在页面中实现了boots-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() {
      if(this.freeUser) {
        return 'lg'
      } else {
        return 'md'
      }
    }
  }
}
</script>

---

方法

方法选项可让您轻松处理更多条件，或处理更高级的情况，例如计算所得的属性。但是与计算出的属性不同，方法允许您传递属性，例如，如果您需要基于v-for中的内容来处理它，这将很有用。

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


<script>
{
  methods: {
    getSize(freeUser) {
      if(freeUser) {
        return 'lg'
      } else {
        return 'md'
      }
    }
  }
}
</script>