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

上記の例では、メッセージを含むボタンと2つのh1タグを作成しました。

showという変数が宣言され、値trueに初期化されます。ボタンの近くに表示されます。ボタンをクリックすると、メソッドが呼び出されますshowdata、変数showの値を切り替えます。これは、ボタンをクリックすると、変数showの値がtrueからfalseに、falseからtrueに変わることを意味します。

次のコードスニペットに示すように、ifをh1タグに割り当てました。

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

これで、変数showの値がチェックされ、trueの場合はh1タグが表示されます。ボタンをクリックしてブラウザで表示します。show変数の値がfalseに変更されると、h1タグはブラウザに表示されません。show変数がtrueの場合にのみ表示されます。

以下はブラウザでの表示です。

ブラウザでチェックインすると、showがfalseの場合にこれが表示されます。

変数showがfalseに設定されている場合、h1タグはDOMから削除されます。

これは、変数がtrueの場合に表示されるものです。変数showがtrueに設定されると、h1タグがDOMに追加されます。

v-else

次の例では、2番目の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” が表示され、falseの場合 “This is h2 tag”が表示されます。これがブラウザに表示されるものです。

上記の表示は、show変数がtrueの場合です。v-elseを追加したため、2番目のステートメントは存在しません。これで、ボタンをクリックすると、show変数がfalseになり、次のスクリーンショットに示すように2番目のステートメントが表示されます。

v-show

v-showはv-ifと同じように動作します。また、割り当てられた条件に基づいて要素を表示および非表示にします。v-ifとv-showの違いは、v-ifは、条件がfalseの場合はHTML要素をDOMから削除し、条件がtrueの場合は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を使用しましたが、true / falseであることに基づいて、画像がブラウザに表示されます。

これで、変数showがtrueになるため、画像は上のスクリーンショットに表示されているとおりになります。ボタンをクリックして表示を見てみましょう。

変数showはfalseであるため、画像は非表示になります。要素を調べて確認すると、画像とともにdivは、スタイルプロパティが表示された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>

インデックスを取得するために、次のコードに示すように、括弧内にもう1つの変数を追加しました。

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

（a、インデックス）では、 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