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

Question

我在页面中实现了一个bootstrap-vue模式。模态的大小为 lg 或大。对于特定的，如果条件我希望大小为 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

速记

if如果: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>