집 > 기사 > 웹 프론트엔드 > Vue 조건부 렌더링_vue.js에 대한 간단한 이해

Vue 조건부 렌더링_vue.js에 대한 간단한 이해

不言원래의: 2018-03-31 17:04:391114검색

이 글은 주로 Vue 조건부 렌더링이 무엇인지 이해하는 데 도움이 됩니다. 관심 있는 친구들이 참고할 수 있습니다.

1. v-if는 단일 요소를 표시합니다. v-if 또는 v-show

<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8">
 <title>Vue条件渲染</title>
 <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
 <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
 </head>
 <body>
 <p class="test">
 <p v-if="isDisplay"> <!--if...else... 单个元素-->
 显示我1
 </p>
 <p v-else>
 显示我2
 </p>
 </p>
 <script type="text/javascript">
 var myVue =new Vue({
 el: ".test",
 data: {
  isDisplay: 1
 }
 })
 </script>
 </body>
</html>

만 따르세요. 출력 결과는 다음과 같습니다. show me 1

2. v-if는 여러 요소를 표시하며 d477f9ce7bf77f53fbcf36bec1b69b7a

과 일치해야 합니다. else는 v-if 또는 v-show

<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8">
 <title>Vue条件渲染</title>
 <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
 <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
 </head>
 <body>
 <p class="test">
 <template v-if="isDisplay"> <!--if...else... 用template实现多个元素-->
 <p>显示我1</p>
 <p>显示我11</p>
 <p>显示我12</p>
 <p>显示我13</p>
 </template>
 <p v-else>
 显示我2
 </p>
 </p>
 <script type="text/javascript">
 var myVue =new Vue({
 el: ".test",
 data: {
  isDisplay: 1
 }
 })
 </script>
 </body>
</html>

만 따를 수 있습니다. 출력 결과: show me 1 show me 11 show me 12 show me 13

3 v-show는 단일 요소 표시만 지원합니다. d477f9ce7bf77f53fbcf36bec1b69b7a

else는 v-if 또는 v-show만 따를 수 있습니다.

<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8">
 <title>Vue条件渲染</title>
 <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
 <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
 </head>
 <body>
 <p class="test">
 <p v-show="isDisplay"> <!--if...else... 单个元素,注意注意 v-show 不支持 <template> 语法-->
 显示我1
 </p>
 <p v-else>
 显示我2
 </p>
 </p>
 <script type="text/javascript">
 var myVue =new Vue({
 el: ".test",
 data: {
  isDisplay: 1
 }
 })
 </script>
 </body>
</html>

4. v-if와 v-show의 차이점

(1)v-if는 실제 렌더링 및 언로드이지만 첫 번째 렌더링 후에는 결과가 캐시됩니다.
(2)v-show 요소는 항상 컴파일되고 유지되며 단순히 CSS를 기반으로 전환됩니다

(3 ) 요약: v-show를 자주 전환해야 한다면 런타임 중에 조건이 변경될 가능성이 없다면 v-if가 더 좋습니다.

GitHub 주소: https://github.com/lily1010/vue_learn/ tree/master /lesson08

Vue 조건부 렌더링_vue.js에 대한 간단한 이해

관련 기사