个性化阅读
专注于IT技术分析

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>
v-if用法实例

在上面的例子中,我们创建了一个按钮和两个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的显示效果:

v-if使用实例

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标签,下面是在浏览器中得到的显示结果。

v-else用法实例

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

v-else使用示例

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元素。

v-show用法实例

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

查看v-show显示效果

如上图所示,变量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保存数组中的值,并被逐一显示,直到所有项显示完成。

v-for用法实例

你可以在浏览器中检查列表的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>
v-for显示数组索引
赞(0)
未经允许不得转载:srcmini » VueJS渲染指令v-for、v-if、v-else、v-show用法详解

评论 抢沙发

评论前必须登录!