VueJS 渲染
VueJS 渲染
本章中我们将了解条件渲染和列表渲染。在条件渲染中，我们将讨论如何使用if、if - else、if - else、show等。在列表渲染中，我们将讨论如何使用for循环。
条件渲染
让我们开始并首先处理一个示例来解释条件渲染的细节。对于条件渲染，我们希望仅在满足条件时输出，并且在if、if-else、if- else、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>输出
在上面的示例中，我们创建了一个按钮和带有消息的两个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时，h1标记将从DOM中删除
这是当变量为真时我们看到的。当变量show设置为true时，h1标记将添加回DOM。
v-else
在下面的示例中，我们向第二个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>
现在，如果显示为true，将显示“This is h1 tag”，如果显示为false，将显示“This is h2 tag”。这是我们将在浏览器中得到的。
v-show
v-show的行为与v-if的行为相同。它还会根据指定给它的条件显示和隐藏元素。v-if和v-show之间的区别在于，如果条件为false，则v-if从DOM中删除HTML元素，如果条件为true，则将其添加回DOM。而v-show隐藏元素，如果条件为false，则display:none。如果条件为true，则返回元素。因此，元素始终存在于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属性display:none。
列表渲染
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>
为了获得索引，我们在括号中添加了一个变量，如下面的代码所示。
<li v-for = "(a, index) in items">{{index}}--{{a}}</li>
在( a，index)中，a是值，index是键。浏览器显示现在将显示如下屏幕截图所示。因此，借助于索引，可以显示任何特定的值。