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

在上一节，我们学习了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="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="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>

为了获取索引，我们可以在括号中添加了一个变量，如下面的代码段所示。

<li v-for="(a, index) in items">{{index}}--{{a}}</li>