VueJS - Rendering

VueJS Rendering - 从简单和简单的步骤学习VueJS，从基本到高级概念，包括概述，环境设置，简介，实例，模板，组件，计算属性，监视属性，绑定，事件，渲染，过渡和动画，指令，路由，混合，渲染功能，反应接口，示例。

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

条件渲染

让我们开始吧，先做一个例子来解释条件渲染的细节.对于条件渲染，我们只想在满足条件时输出，并且在if，else-else，if-else-if，show等的帮助下完成条件检查.

v-if

示例

 < html> < head> < title> VueJs Instance < script type ="text/javascript"src ="js/vue.js">  < body> < div id ="databinding"> < button v-on:click ="showdata"v-bind:style ="styleobj"> Click Me < span style ="font-size:25px;">< b> {{show}} < h1 v-if ="show">这是h1标签 < h2>这是h2标签

< 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; } }，});

输出

v-if

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

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

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

 < button v-on:click ="showdata"v-bind:style ="styleobj"> Click Me这是h1标签

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

以下是浏览器中的显示.

显示标签

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

Show False

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

h1 Tag Removed

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

v-else

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

示例

 < html> < head> < title> VueJs Instance < script type ="text/javascript"src ="js/vue.js">  < body> < div id ="databinding"> < button v-on:click ="showdata"v-bind:style ="styleobj"> Click Me < span style ="font-size:25px;">< b> {{show}} < h1 v-if ="show">这是h1标签 < h2 v-else>这是h2标签

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

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

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

Vue-If True

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

Vue-If 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 < script type ="text/javascript"src ="js/vue.js">  < body> < div id ="databinding"> < button v-on:click ="showdata"v-bind:style ="styleobj"> Click Me < span style ="font-size:25px;">< b> {{show}} < h1 v-if ="show">这是h1标签 < h2 v-else>这是h2标签 < div v-show ="show"> < b> V-Show: < img src ="images/img.jpg"width ="100"height ="100"/>   < 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; } }，});

使用以下代码片段将v-show分配给HTML元素.

 < div v-show ="show">< b> V-Show:< img src ="images/img.jpg"width ="100"height ="100 "/>

我们使用了相同的变量show，并且基于它是true/false，图像显示在浏览器中.

Image True

现在，由于变量show为true，因此图像显示在上面的屏幕截图中.让我们点击按钮，看看显示.

Button

变量show为false，因此隐藏了图像.如果我们检查并查看元素，div和图像仍然是DOM的一部分，样式属性display:none，如上面的屏幕截图所示.

List Rendering

v-for

现在让我们讨论用v-for指令进行列表渲染.

示例

 < html> < head> < title> VueJs Instance < script type ="text/javascript"src ="js/vue.js">  < 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">显示水果名称 < ul> < li v-for ="a in items"> {{a}}   < 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); } }， });

一个名为items的变量被声明为一个数组.在方法中，有一个名为 showinputvalue 的方法，该方法被分配给输入框，该输入框采用水果的名称.在该方法中，使用以下代码将输入文本框内的水果添加到数组中.

  showinputvalue:function(event){  this.items.push(event.target.value); }

我们使用v-for显示输入的水果，如下面的代码片段所示. V-for有助于迭代数组中存在的值.

 < ul> < li v-for ="a in items"> {{a}}

要使用for循环迭代数组，我们必须使用v-for ="a in items"，其中a保存数组中的值并且将显示直到所有项目都完成.

输出

以下是浏览器中的输出.

V-for

在检查项目时，这就是它在浏览器中显示的内容.在DOM中，我们没有看到任何对li元素的v-for指令.它显示没有任何VueJS指令的DOM.

V-for Directives

如果我们希望显示数组的索引，则使用以下代码完成.

 < html> < head> < title> VueJs Instance < script type ="text/javascript"src ="js/vue.js">  < 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">显示水果名称 < ul>项目"> {{index}}  -  {{a}}中的< li v-for ="(a，index)   < 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); } }， });

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