在本章中，我们将学习有条件的渲染和列表渲染。在条件渲染中，我们将讨论如何使用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>
以下是浏览器中的输出效果 -
