VueJS渲染指令v-for、v-if、v-else、v-show用法详解 _vue-for循环

在上一节，我们学习了VueJS事件处理v-on的用法，Vue的事件处理主要是使用v-on指令，其中可结合各种修饰符处理各种事件。本节我们开始学习Vue的渲染功能，主要内容包括条件渲染和列表渲染，在条件渲染中主要是讲解v-if、v-else、v-show等指令的使用，在列表渲染中主要是讲解v-for迭代渲染指令。
一、条件渲染（conditional rendering）下面我们先从一个使用例子开始，解释条件渲染的使用细节。使用条件渲染的目的是，我们只需要在条件满足时输出，条件检查主要是使用指令if、if-else、if-else-if、show等完成。
1、v-if的用法

< div id="app"> < button v-on:click="showdata" v-bind:style="styleobj">点击< /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 app = new Vue({ el: '#app', data: { show: true, styleobj: { backgroundColor: '#2196F3!important', cursor: 'pointer', padding: '8px 16px', verticalAlign: 'middle', } }, methods: { showdata: function () { this.show = !this.show; } }, }); < /script>

文章图片
在上面的例子中，我们创建了一个按钮和两个h1标签。一个为show的变量被声明并初始化为一个值true，它显示在按钮附近。在单击按钮时，我们调用了一个方法showdata，它切换变量show的值。这意味着点击按钮，变量show的值将从true变为false，从false变为true。
我们已经将v-if用于h1标签上，如下面的代码片段所示。

< button v-on:click="showdata" v-bind:style="styleobj">点击< /button> < h1 v-if="show">h1标签< /h1>

现在它将会做的是，它将检查变量show的值，如果它是true，h1标签将被显示。点击按钮并在浏览器中查看，当show变量的值变为false时，浏览器中不显示h1标签，它只在show变量为真时显示。
下面是show变为false的显示效果：

文章图片
2、v-else的用法
在下面的示例中，我们将v-else添加到第二个h1标签上。

< div id = "app"> < button v-on:click = "showdata" v-bind:style = "styleobj">点击< /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 app = new Vue({ el: '#app', data: { show: true, styleobj: { backgroundColor: '#2196F3!important', cursor: 'pointer', padding: '8px 16px', verticalAlign: 'middle', } }, methods : { showdata : function() { this.show = !this.show; } }, }); < /script>

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

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

如果show为true，则显示h1标签，如果show为false，则显示h2标签，下面是在浏览器中得到的显示结果。

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

文章图片
3、v-show的用法
v-show和v-if操作类似，它还可以根据条件显示和隐藏元素。v-if和v-show的区别在于，如果条件为false，则v-if从DOM中删除HTML元素，如果条件为true，则将其添加回来。如果条件为false，v-show会隐藏元素，设置元素display:none，如果条件为true，则显示元素，因此，元素总是出现在dom中。
也就是说v-if不显示元素是删除元素，而v-show不显示元素仅仅是使用display:none将其设置为不可视。

< div id="app"> < button v-on:click="showdata" v-bind:style="styleobj">点击< /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="http://www.srcmini.com/img/reading.jpg" width="100"/> < /div> < /div> < script type="text/javascript"> var app = new Vue({ el: '#app', data: { show: true, styleobj: { backgroundColor: '#2196F3!important', cursor: 'pointer', padding: '8px 16px', verticalAlign: 'middle', } }, methods: { showdata: function () { this.show = !this.show; } }, }); < /script>

将v-show设置到HTML元素上可使用下面的方法：

< div v-show="show"> < b>v-show:< /b> < img src="http://www.srcmini.com/img/reading.jpg" width="100"/> < /div>

我们使用了相同的变量show，根据它的值true或false，使用v-show显示或隐藏THML元素。

文章图片
现在因为变量show为true，所以图片显示在上面的截图中，点击按钮，看下面的显示：

文章图片
如上图所示，变量show为false，因此图像被隐藏了，如果我们检查并查看元素，div和图像仍然是DOM的一部分。
二、列表渲染（list rendering）1、v-for的用法
下面我们讨论列表渲染与v-for指令的用法。

< div id="app"> < input type="text" v-on:keyup.enter="showinputvalue" v-bind:style="styleobj" placeholder="输入名称" /> < h1 v-if="items.length > 0">显示名称< /h1> < ul> < li v-for="a in items">{{a}}< /li> < /ul> < /div> < script type="text/javascript"> var app = new Vue({ el: '#app', 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>

名为items的变量被声明为数组，另外，有一个名为showinputvalue的方法，它用于处理输入框中的内容，在该方法中，使用以下代码将文本框中输入的结果添加到数组中。

methods: { 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代码，在DOM中，不会看到任何指向li元素的v-for指令，Vue渲染的DOM没有任何VueJS指令。
如果需要显示数组的索引，可以使用以下代码完成。

< div id="app"> < input type="text" v-on:keyup.enter="showinputvalue" v-bind:style="styleobj" placeholder="输入名称" /> < h1 v-if="items.length>0">显示名称< /h1> < ul> < li v-for="(a, index) in items">{{index}}--{{a}}< /li> < /ul> < /div> < script type="text/javascript"> var app = new Vue({ el: '#app', 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>

【VueJS渲染指令v-for、v-if、v-else、v-show用法详解】为了获取索引，我们可以在括号中添加了一个变量，如下面的代码段所示。