VueJS - Rendering

在本章中，我们将学习条件渲染和列表渲染.在条件渲染中，我们将讨论使用if，if-else，if-else-if，show等.在列表渲染中，我们将讨论如何使用for循环.

条件渲染

让我们开始吧，先做一个例子来解释条件渲染的细节.对于条件渲染，我们只想在满足条件时输出，并且在if，else-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">这是h1标签</h1> 
< h2>这是h2标签</h2> 
</div> 
< script type ="text/javascript"> 
 var vm = new Vue({
 el:'＃datainding'，
 data:{
 show:true，
 styleobj:{
 backgroundColor: '＃2196F3！important'，
光标:'指针'，
填充:'8px 16px'，
 verticalAlign:'中'，
} 
}，
方法:{
 showdata:function(){
 this.show =！this.show; 
} 
}，
}); 
</script> 
</body> 
</html>

输出

在上面的示例中，我们创建了一个按钮和两个带有消息的h1标签.

一个名为show的变量声明并初始化为值true.它显示在按钮附近.在单击按钮时，我们调用方法 showdata ，它切换变量show的值.这意味着在单击按钮时，变量show的值将从true变为false，false将变为true.

我们已将h if分配给h1标记，如下所示代码片段.

 
< button v-on:click ="showdata"v-bind:style ="styleobj"> Click Me</按钮&GT; 
< h1 v-if ="show">这是h1标签</h1>

现在它将做的是，它将检查变量show的值，如果是真的，将显示h1标签.单击按钮并在浏览器中查看，因为show变量的值更改为false，h1标记不会显示在浏览器中.它仅在show变量为true时显示.

以下是浏览器中的显示.

如果我们检查浏览器，这就是我们在show为false时得到的结果.

当变量show设置为false时，将从DOM中删除h1标记.

这是我们在变量为true时看到的.
当变量show设置为true时，h1标签被添加回DOM.

v-else

在下面例如，我们已将v-else添加到第二个h1标记.

示例

 
< 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">这是h1标签</h1> 
< h2 v-else>这是h2标签</h2> 
</div> 
< script type ="text/javascript"> 
 var vm = new Vue({
 el:'＃datainding'，
 data:{
 show:true，
 styleobj:{
 backgroundColor: '＃2196F3！important'，
光标:'指针'，
填充:'8px 16px'，
 verticalAlign:'中'，
} 
}，
方法:{
 showdata:function(){
 this.show =！this.show; 
} 
}，
}); 
</script> 
</body> 
</html>

使用以下代码片段添加v-else.

 
 < h1 v-if ="show">这是h1标签</h1> 
< h2 v-else>这是h2标签</h2>

现在，如果show为true "这是h1标签"将会显示，如果为false "这是将显示h2标签".这就是我们将在浏览器中获得的内容.

上面显示的是show变量为true.因为，我们添加了v-else，第二个语句不存在.现在，当我们点击按钮时，show变量将变为false，第二个语句将显示如下面的屏幕截图所示.

v-show

v-show的行为与v-if相同.它还根据分配给它的条件显示和隐藏元素. v-if和v-show之间的区别在于v-if如果条件为false则从DOM中删除HTML元素，如果条件为真则将其添加回来.而v-show隐藏了元素，如果条件为false，则display:none.如果条件为真，它会显示元素返回.因此，该元素始终存在于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">这是h1标签</h1> 
< h2 v-else>这是h2标签</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:'＃datainding'，
 data:{
 show:true，
 styleobj:{
 backgroundColor: '＃2196F3！important'，
光标:'指针'，
填充:'8px 16px'，
 verticalAlign:'中'，
} 
}，
方法:{
 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的一部分，样式属性display:none，如上面的屏幕截图所示.

List Rendering

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">显示水果名称</h1> 
< ul> 
< li v-for ="a in items"> {{a}}</li> 
</ul> 
</div> 
< script type ="text/javascript"> 
 var vm = new Vue({
 el:'＃datainding'，
 data:{
 items:[]，
 styleobj:{
 width :"30％"，
填充:"12px 20px"，
保证金:"8px 0"，
 boxSizing:"border-box"
} 
}， 
方法:{
 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">显示水果名称</h1> 
< ul>项目"> {{index}}  -  {{a}}</li>中的
< li v-for ="(a，index) 
</ul> 
</div> 
< script type ="text/javascript"> 
 var vm = new Vue({
 el:'＃datainding'，
 data:{
 items:[]，
 styleobj:{
 width :"30％"，
填充:"12px 20px"，
保证金:"8px 0"，
 boxSizing:"border-box"
} 
}， 
方法:{
 showinputvalue:function(event){
 this.items.push(event.target.value); 
} 
}，
 }); 
</script> 
</body> 
</html>

要获取索引，我们在括号中添加了一个变量，如下面的代码所示.