Добавить более одного v-if с разными условиями для одного div без дубликата?

Question

У меня div Vue с более чем одним другим условием if, есть способ добавить более одного v-if в один <div>,

Что-то в этом роде

<div v-if="any" v-if="another-any">
</div>

Я видел это, но работал как условие и условие, а не как другое условие

<div v-if="any && another-any">
</div>

А также я видел условие ИЛИ

<div v-if="any || another-any">
</div>

Но есть два или более различных условия в одномДИВ

Answer 1

Да.Они работают по-разному только внутри этого div:

one && other // runs if both return truthy value
one || other // runs if any of them returns truthy value

Внимание: another-any является недопустимой переменной.Имя переменной не может содержать dash.

Answer 2

Если ваше условие слишком длинное, чтобы поместить его в v-if, просто создайте вычисляемое свойство:

computed: {
   any() {
       return this.isSomething || this.isSomethingElse // || ...
   }

}

, а затем просто используйте его в шаблоне: <div v-if="any">