> 웹 프론트엔드 > JS 튜토리얼 > Vue.js의 조건부 렌더링을 이해하는 방법은 무엇입니까? (코드 예)

Vue.js의 조건부 렌더링을 이해하는 방법은 무엇입니까? (코드 예)

藏色散人
풀어 주다: 2019-03-29 14:30:08
원래의
2860명이 탐색했습니다.

이 튜토리얼에서는 Vue.js의 조건부 렌더링을 이해하는 방법을 알아봅니다. Vue.js中的条件渲染。

Vue.js의 조건부 렌더링을 이해하는 방법은 무엇입니까? (코드 예)

什么是条件渲染?

条件渲染意味着,如果某个特定条件为真,则从dom中添加或删除元素。

Vue中,我们需要使用v-if指令来有条件地渲染元素。

让我们看一个例子:

<template>
  <div>
  <!-- v-if="javascript expression" -->
   <h1 v-if="isActive">Hello Vuejs</h1>
   <button @click="isActive= !isActive">点击</button>
  </div>
</template>

<script>

export default{
    data:function(){
        return{
            isActive:false
        }
    }
}
</script>
로그인 후 복사

在上面的代码中,我们添加了一个带有属性isActivev-if指令,因此如果isActive属性为true, h1元素只渲染到dom中。

我们还可以在v-if指令之后扩展v-else指令。

 <h1 v-if="isActive">Hello Vuejs</h1>
   <h1 v-else>Hey Vuejs</h1>
로그인 후 복사

如果isActive属性为真,则第一个h1元素将渲染,否则第二个h1元素将渲染到dom中。

我们还可以使用v-else-if块进一步扩展它。

<h1 v-if="isActive">Hello Vuejs</h1>
   <h1 v-else-if="isActive && a.length===0">You&#39;re vuejs</h1>
   <h1 v-else>Hey Vuejs</h1>
로그인 후 복사

JavaScript中,v-else-if指令的工作原理类似于else-if块。

注意:一个v-else元素必须紧跟一个v-if元素或v-if-else元素,否则将无法识别它。

如何有条件地渲染多个元素?

有时我们必须有条件地渲染多个元素,在这种情况下,我们需要将元素组合在一起。

<template>
  <div v-if="available">
    <h1>Items are available</h1>
    <p>More items in the stock</p>
  </div>
  <div v-else>
    <h1>Items are not available</h1>
    <p>Out of stock</p>
  </div>
</template>

<script>
export default {
  data: function() {
    return {
      available: true
    };
  }
};
</script>
로그인 후 복사

在这里,我们将div

Vue.js의 조건부 렌더링을 이해하는 방법은 무엇입니까? (코드 예)

조건부 렌더링이란 무엇인가요?Vue.js의 조건부 렌더링을 이해하는 방법은 무엇입니까? (코드 예)

조건부 렌더링은 특정 조건이 true인 경우 dom에서 요소를 추가하거나 제거하는 것을 의미합니다.

Vue에서는 요소를 조건부로 렌더링하려면 v-if 지시어를 사용해야 합니다.

예를 살펴보겠습니다:

rrreee

위 코드에서는 isActive 속성이 있는 v-if 지시문을 추가했습니다. 따라서 isActive 속성은 <code>true이고 h1 요소는 dom으로만 렌더링됩니다. 🎜🎜v-if 지시문 다음에 v-else 지시문을 확장할 수도 있습니다. 🎜rrreee🎜 isActive 속성이 true이면 첫 번째 h1 요소가 렌더링되고, 그렇지 않으면 두 번째 h1 요소가 로 렌더링됩니다. >돔. 🎜🎜v-else-if 블록을 사용하여 더 확장할 수도 있습니다. 🎜rrreee🎜JavaScript에서 v-else-if 지시문은 else-if 블록과 유사하게 작동합니다. 🎜🎜참고: v-else 요소 뒤에는 v-if 요소 또는 v-if-else 요소가 와야 합니다. 그렇지 않으면 인식되지 않을 것입니다. 🎜🎜여러 요소를 조건부로 렌더링하는 방법 🎜🎜때로는 여러 요소를 조건부로 렌더링해야 하는데, 이 경우 요소를 그룹화해야 합니다. 🎜rrreee🎜여기에서는 div 태그 내에서 여러 요소를 그룹화합니다. 🎜🎜🎜🎜🎜관련 추천: "🎜javascript tutorial🎜"🎜🎜이 글은 Vue.js의 조건부 렌더링에 대한 자세한 설명이 필요한 친구들에게 도움이 되길 바랍니다! 🎜

위 내용은 Vue.js의 조건부 렌더링을 이해하는 방법은 무엇입니까? (코드 예)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿