Vuejs-rendering
VueJS-レンダリング
この章では、条件付きレンダリングとリストレンダリングについて学習します。 条件付きレンダリングでは、if、if-else、if-else-if、showなどの使用について説明します。 リストのレンダリングでは、forループの使用方法について説明します。
条件付きレンダリング
始めに、条件付きレンダリングの詳細を説明するための例に取り掛かりましょう。 条件付きレンダリングでは、条件が満たされ、if、if-else、if-else-if、showなどの助けを借りて条件チェックが行われたときにのみ出力したい
v-if
例
<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>出力
上の例では、メッセージとボタンと2つのh1タグを作成しました。
showという変数が宣言され、値trueに初期化されます。 ボタンの近くに表示されます。 ボタンをクリックすると、変数showの値を切り替えるメソッド showdata が呼び出されます。 これは、ボタンをクリックすると、変数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の値がチェックされ、trueの場合はh1タグが表示されます。 ボタンをクリックしてブラウザで表示します。show変数の値がfalseに変更されると、ブラウザにはh1タグが表示されません。 show変数がtrueの場合にのみ表示されます。
以下はブラウザでの表示です。
ブラウザでチェックインすると、これはshowがfalseのときに得られるものです。
変数showがfalseに設定されている場合、h1タグはDOMから削除されます。
これは、変数がtrueのときに表示されるものです。 変数showがtrueに設定されると、h1タグがDOMに再び追加されます。
v-else
次の例では、2番目のh1タグにv-elseを追加しました。
例
<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>ここで、showがtrueの場合*「これはh1タグです」が表示され、falseの場合は「これはh2タグです」*が表示されます。 これはブラウザで取得するものです。
上記の表示は、show変数がtrueの場合です。 v-elseを追加したため、2番目のステートメントは存在しません。 ボタンをクリックすると、show変数がfalseになり、次のスクリーンショットに示すように2番目のステートメントが表示されます。
v-show
v-showはv-ifと同じように動作します。 また、割り当てられた条件に基づいて要素を表示および非表示にします。 v-ifとv-showの違いは、条件がfalseの場合、v-ifがDOMからHTML要素を削除し、条件がtrueの場合にそれを追加し直すことです。 一方、display：noneで条件がfalseの場合、v-showは要素を非表示にします。 条件が真の場合、要素を表示します。 したがって、要素は常にdomに存在します。
例
<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の一部であり、styleプロパティが表示されています：上記のスクリーンショットでは表示されていません。
リストのレンダリング
v-for
v-forディレクティブを使用したリストのレンダリングについて説明します。
例
<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は配列の値を保持し、すべての項目が完了するまで表示されます。
出力
以下はブラウザの出力です。
アイテムを検査すると、これがブラウザに表示されます。 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、index）では、 a は値で、 index はキーです。 ブラウザの表示は、次のスクリーンショットのようになります。 したがって、インデックスを使用して、特定の値を表示できます。
