동적 페이지 렌더링을 달성하기 위해 Vue에서 v-show 및 v-if를 사용하는 방법

Vue는 동적 웹 애플리케이션을 구축하는 데 널리 사용되는 JavaScript 프레임워크입니다. v-show와 v-if는 모두 뷰를 동적으로 렌더링하기 위한 Vue의 명령입니다. DOM 요소가 표시되거나 숨겨지지 않을 때 페이지를 더 잘 제어하는 ​​데 도움이 될 수 있습니다. 이 기사에서는 Vue에서 v-show 및 v-if 명령어를 사용하여 동적 페이지 렌더링을 달성하는 방법을 자세히 설명합니다.

Vue의 v-show 지시어

v-show는 표현식의 값에 따라 요소를 동적으로 표시하거나 숨기는 Vue의 지시어입니다. v-show를 사용하면 요소는 항상 DOM에서 렌더링되며 CSS만 표시 또는 숨기기를 제어하는 ​​데 사용됩니다.

v-show 지시문은 다음과 같은 방법으로 사용할 수 있습니다.

<template>
  <div>
    <h1 id="Dynamic-Title">Dynamic Title</h1>

    <button @click="toggleTitle">Toggle Title</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showTitle: true
    }
  },
  methods: {
    toggleTitle() {
      this.showTitle = !this.showTitle
    }
  }
}
</script>

위 코드에서는 제목 표시를 전환하는 버튼을 만들었습니다. showTitle 변수에 바인딩하면 제목은 해당 값이 true인 경우에만 표시됩니다. 버튼을 클릭하면 ToggleTitle 메소드의 showTitle 값이 false로 전환되고 DOM이 다시 렌더링됩니다. 이 경우 제목은 브라우저에서 사라집니다.

Vue의 v-if 지시문

v-if 지시문은 지정된 조건이 true인 경우에만 DOM 요소를 렌더링하는 데 사용됩니다. v-show와 달리 v-if는 DOM 요소를 동적으로 추가/제거합니다.

v-if 지시문은 다음과 같은 방법으로 사용할 수 있습니다.

<template>
  <div>
    <h2 id="Welcome-username">Welcome, {{ username }}!</h2>

    <button @click="login">Log In</button>

    <button @click="logout">Log Out</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isLoggedIn: false,
      username: ''
    }
  },

  methods: {
    login() {
      this.isLoggedIn = true
      this.username = 'Your Username'
    },

    logout() {
      this.isLoggedIn = false
      this.username = ''
    }
  }
}
</script>

위 코드에서는 v-if 지시문을 사용하여 로그인 여부를 확인하고 있습니다. 이미 로그인되어 있으면 DOM에 환영 메시지를 렌더링하고, 그렇지 않으면 숨깁니다. 로그인 또는 로그아웃 버튼을 클릭하면 로그인 및 로그아웃 메소드가 호출되며 이러한 메소드는 데이터 및 DOM을 업데이트합니다.

Vue에서 v-show와 v-if의 조합

많은 경우 특정 영역을 동적으로 렌더링하고 상황에 따라 다른 콘텐츠를 표시/숨겨야 합니다. v-show와 v-if를 결합하여 이러한 종류의 동적 렌더링을 구현할 수 있습니다.

<template>
  <div>
    <div v-if="isActivated">
      <h3 id="Welcome-name">Welcome, {{ name }}!</h3>
    </div>
    <div v-else>
      <h3 id="Please-log-in-to-access-this-page">Please log in to access this page.</h3>
    </div>

    <button @click="toggleActivation">Activate/Deactivate</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isActivated: false,
      name: 'Your Username'
    }
  },

  methods: {
    toggleActivation() {
      this.isActivated = !this.isActivated
    }
  }
}
</script>

위의 예에서는 v-if 지시어를 사용하여 활성화되었는지 확인하고 다른 뷰를 렌더링합니다. isActivated가 true이면 환영 메시지를 DOM에 렌더링하고, 그렇지 않으면 사용자를 인증하기 위해 메시지를 표시합니다. 우리는 일부 콘텐츠를 동적으로 표시하기 위해 v-show 지시문을 사용합니다.

버튼이 있는 구성 요소를 사용하면 ToggleActivation을 사용하여 isActivated 값을 전환하여 DOM 보기의 렌더링을 변경할 수 있습니다. v-show와 v-if를 함께 사용하면 페이지를 더 잘 제어할 수 있고 페이지를 더욱 동적이고 유연하게 만들 수 있습니다.

Summary

v-show와 v-if는 Vue의 두 가지 유용한 명령으로, DOM 요소의 표시 및 숨기기를 제어하는 ​​데 사용됩니다. v-show는 단순히 CSS 표시/숨기기를 제어하는 ​​데 사용되는 반면, v-if는 DOM 요소를 동적으로 추가/제거하는 데 사용됩니다. 이 두 지시문을 함께 사용하면 DOM의 동적 렌더링을 더 효과적으로 제어할 수 있습니다. Vue 동적 페이지 렌더링을 구현할 때 상황에 따라 v-show 또는 v-if와 이들의 조합을 사용하도록 결정해야 합니다.

위 내용은 동적 페이지 렌더링을 달성하기 위해 Vue에서 v-show 및 v-if를 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!