Vue JS를 사용하여 HTML에서 동일한 태그에 "v-if"와 "v-else"를 사용하는 방법은 무엇입니까?

Vue JS를 사용하여 HTML에서 동일한 태그에 "v-if"와 "v-else"를 사용하는 방법은 무엇입니까?

여러 요소에서 Vue js 조건문을 사용합니다.

경우에 따라 요소를 필터링하기 위해 if와 other를 동일한 요소에 배치해야 합니다.

여기서 if와 other를 적용하기 위해 여러 요소를 사용합니다.

   <block v-if="nb == 3" align="left"></block>
   <block v-if="nb > 3" align="center"></block>

하지만 저는 두 가지를 하나의 요소로 적용하고 싶습니다.

  <block v-if="nb == 3" align="left" v-else align="center"></block>

가능합니까?

또는 이를 적용할 수 있는 다른 솔루션이 있습니까?

잘 부탁드립니다.

사용하는 대신v-if, Atribute를 3진 식에 바인드 해 보겠습니다.

// : is a shorthand for v-bind:
<block :align="nb == 3 ? 'left' : 'center'"></block>

이것이 조금 복잡해 보이는 경우(또는 사용하는 논리가 너무 복잡해서 한 줄로 표현하기 어려운 경우) 컴포넌트에 반환되는 계산 속성을 생성해 볼 수도 있습니다."left"또는"center"대신 바인드합니다.

사용할 수 없습니다.v-if그리고.v-else같은 요소에서.

난 개인적으로 계산된 재산을 사용하겠어

내 생각엔 네가nb반응 변수 또는 유사 변수입니다.

따라서 다음과 같은 것을 찾아야 합니다.

<block v-bind:align="computedAlign"></block>

컴포넌트 내에서

// assuming you're using data and not props
data() {
  return {
    nb: 1 // default
  }
},
// some other stuff that sets the nb variable in some way
computed: {
  computedAlign() => {
    if (this.nb === 3) {
      return 'left'
    } else {
      return 'center'
    }
  }
}

3진 연산자를 사용하면 간단히 달성할 수 있습니다.

<block :align="nb==3?'right':'left'"></block>

언급URL : https://stackoverflow.com/questions/40887454/how-to-use-v-if-and-v-else-in-same-tag-in-html-using-vue-js