VueJS-렌더링

이 장에서는 조건부 렌더링 및 목록 렌더링에 대해 알아 봅니다. 조건부 렌더링에서는 if, if-else, if-else-if, show 등을 사용하는 방법에 대해 설명합니다. 목록 렌더링에서 for 루프를 사용하는 방법에 대해 설명합니다.

조건부 렌더링

조건부 렌더링에 대한 세부 사항을 설명하기 위해 먼저 예제를 시작하고 작업 해 보겠습니다. 조건부 렌더링을 사용하면 조건이 충족되고 if, if-else, if-else-if, show 등의 도움으로 조건부 확인이 수행 될 때만 출력하려고합니다.

v-if

Example

<html>
   <head>
      <title>VueJs Instance</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <div id = "databinding">
         <button v-on:click = "showdata" v-bind:style = "styleobj">Click Me</button>
         <span style = "font-size:25px;"><b>{{show}}</b></span>
         <h1 v-if = "show">This is h1 tag</h1>
         <h2>This is h2 tag</h2>
      </div>
      <script type = "text/javascript">
         var vm = new Vue({
            el: '#databinding',
            data: {
               show: true,
               styleobj: {
                  backgroundColor: '#2196F3!important',
                  cursor: 'pointer',
                  padding: '8px 16px',
                  verticalAlign: 'middle',
               }
            },
            methods : {
               showdata : function() {
                  this.show = !this.show;
               }
            },
         });
      </script>
   </body>
</html>

Output

위의 예에서는 메시지와 함께 버튼과 두 개의 h1 태그를 만들었습니다.

show라는 변수가 선언되고 true 값으로 초기화됩니다. 버튼 가까이에 표시됩니다. 버튼을 클릭하면 메서드를 호출합니다.showdata, 변수 show의 값을 토글합니다. 즉, 버튼을 클릭하면 show 변수 값이 true에서 false로, false에서 true로 변경됩니다.

다음 코드 스 니펫과 같이 h1 태그에 if를 할당했습니다.

<button v-on:click = "showdata" v-bind:style = "styleobj">Click Me</button>
<h1 v-if = "show">This is h1 tag</h1>

이제 할 일은 변수 show의 값을 확인하고 참이면 h1 태그가 표시됩니다. 버튼을 클릭하고 브라우저에서 봅니다. show 변수의 값이 false로 변경되면 h1 태그가 브라우저에 표시되지 않습니다. show 변수가 true 인 경우에만 표시됩니다.

다음은 브라우저의 표시입니다.

브라우저에서 확인하면 show가 false 일 때 얻는 결과입니다.

show 변수가 false로 설정되면 h1 태그가 DOM에서 제거됩니다.

이것이 변수가 참일 때 우리가 보는 것입니다. show 변수가 true로 설정되면 h1 태그가 DOM에 다시 추가됩니다.

v-else

다음 예에서는 두 번째 h1 태그에 v-else를 추가했습니다.

Example

<html>
   <head>
      <title>VueJs Instance</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <div id = "databinding">
         <button v-on:click = "showdata" v-bind:style = "styleobj">Click Me</button>
         <span style = "font-size:25px;"><b>{{show}}</b></span>
         <h1 v-if = "show">This is h1 tag</h1>
         <h2 v-else>This is h2 tag</h2>
      </div>
      <script type = "text/javascript">
         var vm = new Vue({
            el: '#databinding',
            data: {
               show: true,
               styleobj: {
                  backgroundColor: '#2196F3!important',
                  cursor: 'pointer',
                  padding: '8px 16px',
                  verticalAlign: 'middle',
               }
            },
            methods : {
               showdata : function() {
                  this.show = !this.show;
               }
            },
         });
      </script>
   </body>
</html>

v-else는 다음 코드 스 니펫을 사용하여 추가됩니다.

<h1 v-if = "show">This is h1 tag</h1>
<h2 v-else>This is h2 tag</h2>

이제 쇼가 사실이라면 “This is h1 tag” 표시되고 거짓 인 경우 “This is h2 tag”표시됩니다. 이것이 우리가 브라우저에서 얻을 수있는 것입니다.

위의 디스플레이는 show 변수가 참일 때입니다. v-else를 추가했기 때문에 두 번째 문은 없습니다. 이제 버튼을 클릭하면 show 변수가 false가되고 다음 스크린 샷과 같이 두 번째 문이 표시됩니다.

V- 쇼

v-show는 v-if와 동일하게 작동합니다. 또한 지정된 조건에 따라 요소를 표시하고 숨 깁니다. v-if와 v-show의 차이점은 v-if는 조건이 거짓이면 DOM에서 HTML 요소를 제거하고 조건이 참이면 다시 추가한다는 것입니다. v-show는 display : none으로 조건이 false이면 요소를 숨 깁니다. 조건이 참이면 요소를 다시 표시합니다. 따라서 요소는 항상 dom에 존재합니다.

Example

<html>
   <head>
      <title>VueJs Instance</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <div id = "databinding">
         <button v-on:click = "showdata" v-bind:style = "styleobj">Click Me</button>
         <span style = "font-size:25px;"><b>{{show}}</b></span>
         <h1 v-if = "show">This is h1 tag</h1>
         <h2 v-else>This is h2 tag</h2>
         <div v-show = "show">
            <b>V-Show:</b>
            <img src = "images/img.jpg" width = "100" height = "100" />
         </div>
      </div>
      <script type = "text/javascript">
         var vm = new Vue({
            el: '#databinding',
            data: {
               show: true,
               styleobj: {
                  backgroundColor: '#2196F3!important',
                  cursor: 'pointer',
                  padding: '8px 16px',
                  verticalAlign: 'middle',
               }
            },
            methods : {
               showdata : function() {
                  this.show = !this.show;
               }
            },
         });
      </script>
   </body>
</html>

v-show는 다음 코드 스 니펫을 사용하여 HTML 요소에 할당됩니다.

<div v-show = "show"><b>V-Show:</b><img src = "images/img.jpg" width = "100" height = "100" /></div>

우리는 동일한 변수 show를 사용했고 그것이 참 / 거짓임을 기반으로 이미지가 브라우저에 표시됩니다.

이제 show 변수가 참이므로 이미지는 위의 스크린 샷과 같습니다. 버튼을 클릭하고 디스플레이를 보겠습니다.

show 변수는 false이므로 이미지가 숨겨집니다. 요소를 검사하고 보면 이미지와 함께 div는 여전히 스타일 속성 display : none이있는 DOM의 일부입니다. 위 스크린 샷에서 볼 수 있습니다.

목록 렌더링

v-for

이제 v-for 지시문을 사용한 목록 렌더링에 대해 설명하겠습니다.

Example

<html>
   <head>
      <title>VueJs Instance</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <div id = "databinding">
         <input type = "text" v-on:keyup.enter = "showinputvalue"
            v-bind:style = "styleobj" placeholder = "Enter Fruits Names"/>
         <h1 v-if = "items.length>0">Display Fruits Name</h1>
         <ul>
            <li v-for = "a in items">{{a}}</li>
         </ul>
      </div>
      <script type = "text/javascript">
         var vm = new Vue({
            el: '#databinding',
            data: {
               items:[],
               styleobj: {
                  width: "30%",
                  padding: "12px 20px",
                  margin: "8px 0",
                  boxSizing: "border-box"
               }
            },
            methods : {
               showinputvalue : function(event) {
                  this.items.push(event.target.value);
               }
            },
         });
      </script>
   </body>
</html>

items라는 변수는 배열로 선언됩니다. 메서드에는 다음과 같은 메서드가 있습니다.showinputvalue, 과일의 이름을받는 입력 상자에 할당됩니다. 이 메서드에서 텍스트 상자 안에 입력 된 과일은 다음 코드를 사용하여 배열에 추가됩니다.

showinputvalue : function(event) {
   this.items.push(event.target.value);
}

다음 코드와 같이 입력 한 과일을 표시하기 위해 v-for를 사용했습니다. V-for는 배열에있는 값을 반복하는 데 도움이됩니다.

<ul>
   <li v-for = "a in items">{{a}}</li>
</ul>

for 루프를 사용하여 배열을 반복하려면 v-for = "a in items"를 사용해야합니다. 여기서 a는 배열의 값을 보유하고 모든 항목이 완료 될 때까지 표시됩니다.

Output

다음은 브라우저의 출력입니다.

항목을 검사 할 때 이것이 브라우저에 표시됩니다. DOM에는 li 요소에 대한 v-for 지시문이 없습니다. VueJS 지시문없이 DOM을 표시합니다.

배열의 인덱스를 표시하려면 다음 코드를 사용합니다.

<html>
   <head>
      <title>VueJs Instance</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <div id = "databinding">
         <input type = "text" v-on:keyup.enter = "showinputvalue"
            v-bind:style = "styleobj" placeholder = "Enter Fruits Names"/>
         <h1 v-if = "items.length>0">Display Fruits Name</h1>
         <ul>
            <li v-for = "(a, index) in items">{{index}}--{{a}}</li>
         </ul>
      </div>
      <script type = "text/javascript">
         var vm = new Vue({
            el: '#databinding',
            data: {
               items:[],
               styleobj: {
                  width: "30%",
                  padding: "12px 20px",
                  margin: "8px 0",
                  boxSizing: "border-box"
               }
            },
            methods : {
               showinputvalue : function(event) {
                  this.items.push(event.target.value);
               }
            },
         });
      </script>
   </body>
</html>

인덱스를 얻기 위해 다음 코드와 같이 대괄호에 변수를 하나 더 추가했습니다.

<li v-for = "(a, index) in items">{{index}}--{{a}}</li>

(a, index)에서 a 가치이고 index열쇠입니다. 이제 브라우저 디스플레이는 다음 스크린 샷과 같습니다. 따라서 색인의 도움으로 특정 값을 표시 할 수 있습니다.

ja/tutorial
es/tutorial
de/tutorial
fr/tutorial
th/tutorial
pt/tutorial
ru/tutorial
vi/tutorial
it/tutorial
ko/tutorial
tr/tutorial
id/tutorial
pl/tutorial
hi/tutorial
japost
espost
depost
frpost
thpost
ptpost
rupost
vipost
itpost
kopost
trpost
idpost
plpost
hipost

© Copyright 2021 - 2024 | All Rights Reserved