在本章中，我们将学习条件渲染和列表渲染。在条件渲染中，我们将讨论如何使用if，if-else，if-else-if，show等。在列表渲染中，我们将讨论如何使用for循环。
让我们开始并首先研究一个示例，以说明条件渲染的细节。使用条件渲染时，我们只希望在满足条件并且在if，if-else，if-else-if，show等帮助下完成条件检查时输出。
例
<html>
<head>
<title>VueJs渲染 - Web176教程网/https://www.web176.com</title>
<script type = "text/javascript" src = "/demo/vue/vue2.min.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',
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。
如下面的代码片段所示，我们已将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时显示。
在以下示例中，我们将v-else添加到了第二个h1标签。
例
<html>
<head>
<title>VueJs渲染 - Web176教程网/https://www.web176.com</title>
<script type = "text/javascript" src = "/demo/vue/vue2.min.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',
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”；如果为false，则将显示“ This is h2 tag”。这就是我们将在浏览器中获得的。
上面的显示是当show变量为true时。由于我们添加了v-else，因此第二条语句不存在。现在，当我们单击按钮时，show变量将变为false，并且第二条语句将显示，如以下屏幕截图所示。
v-show的行为与v-if相同。它还根据分配的条件显示和隐藏元素。v-if和v-show之间的区别在于，如果条件为false，则v-if从DOM中删除HTML元素，如果条件为true，则将其重新添加。如果条件为false且display：none，则v-show隐藏元素。如果条件为真，它将向后显示元素。因此，该元素始终存在于dom中。
例
<html>
<head>
<title>VueJs渲染 - Web176教程网/https://www.web176.com</title>
<script type = "text/javascript" src = "/demo/vue/vue2.min.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 class="j-lazy" src="/wp-content/uploads/2020/11/vue.jpg" data-original="/wp-content/uploads/2020/11/vue.jpg" alt="VueJs教程" style="display: inline;">
</div>
</div>
<script type = "text/javascript">
var vm = new Vue({
el: '#databinding',
data: {
show: true,
styleobj: {
backgroundColor: '#2196F3',
cursor: 'pointer',
padding: '8px 16px',
verticalAlign: 'middle',
}
},
methods : {
showdata : function() {
this.show = !this.show;
}
},
});
</script>
</body>
</html>使用以下代码段将v-show分配给HTML元素。
我们使用了相同的变量show，并且基于它的true / false，图像显示在浏览器中。
现在，由于变量show为true，因此图像如上面的屏幕快照所示。让我们单击按钮并查看显示。
变量show为false，因此图像被隐藏。如果我们检查并看到该元素，则div和图像仍然是DOM的一部分，并且具有style属性显示：如上图所示，没有。
现在让我们讨论使用v-for指令的列表呈现。
例
<html>
<head>
<title>VueJs渲染 - Web176教程网/https://www.web176.com</title>
<script type = "text/javascript" src = "/demo/vue/vue2.min.js"></script>
</head>
<body>
<div id = "databinding">
<input type = "text" v-on:keyup.enter = "showinputvalue"
v-bind:style = "styleobj" placeholder = "Please Enter..."/>
<h1 v-if = "items.length>0">列表</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>称为项的变量声明为数组。在方法中，有一个名为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渲染 - Web176教程网/https://www.web176.com</title>
<script type = "text/javascript" src = "/demo/vue/vue2.min.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是键。现在，浏览器显示将如以下屏幕快照所示。因此，借助索引可以显示任何特定值。
OK，本次课程到此结束。