在本章中，我們將學習有條件的渲染和列表渲染。在條件渲染中，我們將討論如何使用if，if-else，if-else-if，show等。在列表渲染中，我們將討論如何使用for迴圈。
有條件的渲染
下麵先來看看一個例子來解釋有條件渲染的細節。 使用有條件渲染時，只在滿足條件時進行輸出，並且在if，else，if-else-if，show等的幫助下完成條件檢查。
1. v-if
創建一個檔：rendering-v-if.html -
<html>
<head>
<meta charset="UTF-8">
<title>VueJs條件渲染示例</title>
<script type = "text/javascript" src = "js/vue.js"></script>
</head>
<body>
<div id = "databinding">
<button v-on:click = "showdata" v-bind:style = "styleobj">點擊我</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>
在上面的例子中，我們創建了一個按鈕和兩個帶有消息的h1標籤。
show變數被聲明並初始化為值true，它靠近按鈕顯示。點擊按鈕時調用方法：showdata，它切換變數show的值。這意味著點擊按鈕時，變數show的值將從true變為false，也可以由false變為true。
如下面的代碼片段所示，已經分配給了h1標籤。
<button v-on:click = "showdata" v-bind:style = "styleobj">Click Me</button>
<h1 v-if = "show">This is h1 tag</h1>
VueJS將檢查變數show的值，如果為true值時將顯示h1標籤。單擊該按鈕並在流覽器中查看，因為show變數的值更改為false，則h1標記不會顯示在流覽器中。只有在show變數為true時才顯示。
如下在流覽器中的顯示效果 -
2. v-else
在下面的例子中，我們添加了v-else條件到第二個h1標籤。創建一個檔：rendering-v-else.html -
<html>
<head>
<meta charset="UTF-8">
<title>VueJs條件渲染示例</title>
<script type = "text/javascript" src = "js/vue.js"></script>
</head>
<body>
<div id = "databinding">
<button v-on:click = "showdata" v-bind:style = "styleobj">點擊我</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，則顯示"This is h1 tag"，如果show為false，則顯示為"This is h2 tag"，下麵是將在流覽器中看到的效果 -
3. v-show
v-show的行為與v-if相同。 它還根據分配給它的條件顯示和隱藏元素。 v-if與v-show之間的區別在於，如果條件為false，則v-if從HTML中刪除HTML元素，如果條件為true，則將其添加回去。 而v-show隱藏元素，如果條件為false，則應用display:none。如果條件是true則它顯示元素回來。 因此，元素總是存在於dom中。
創建一個檔：rendering-v-show.html -
<html>
<head>
<meta charset="UTF-8">
<title>VueJs條件渲染示例</title>
<script type = "text/javascript" src = "js/vue.js"></script>
</head>
<body>
<div id = "databinding">
<button v-on:click = "showdata" v-bind:style = "styleobj">點擊我</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/mydog.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/mydog.jpg" width = "100" height = "100" /></div>
已經使用了相同的show變數，並基於值true/false，圖像顯示在流覽器中如下所示 -
列表渲染
1. v-for
現在討論如何使用v-for指令進行列表渲染。創建一個檔：rendering-v-for.html -
<html>
<head>
<meta charset="UTF-8">
<title>VueJs渲染示例</title>
<script type = "text/javascript" src = "js/vue.js"></script>
</head>
<body>
<body>
<div id = "databinding">
<input type = "text" v-on:keyup.enter = "showinputvalue"
v-bind:style = "styleobj" placeholder = "輸入水果名稱，並回車..."/><br/>
<b v-if = "items.length>0">顯示水果列表如下：</b>
<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: "40%",
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保存數組中的值並顯示，直到完成所有專案。
以下是流覽器中的輸出效果 -
如果想要顯示數組的索引，則使用下麵的代碼完成。
<html>
<head>
<meta charset="UTF-8">
<title>VueJs渲染示例</title>
<script type = "text/javascript" src = "js/vue.js"></script>
</head>
<body>
<body>
<div id = "databinding">
<input type = "text" v-on:keyup.enter = "showinputvalue"
v-bind:style = "styleobj" placeholder = "輸入水果名稱，並回車..."/><br/>
<b v-if = "items.length>0">顯示水果列表如下：</b>
<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: "40%",
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>
以下是流覽器中的輸出效果 -
