Vue.js03之常用标签v-for,v-if,v-show

相信大家看了我的前面两次博客关于Vue.js相关的讲解之后，应该对Vue.js了解了一些基础知识了。本次将会继续讲解Vue.js常用的指令v-for,v-if和v-show。

v-for

我们用 v-for指令根据一组数组的选项列表进行渲染。v-for指令需要使用 item in items形式的特殊语法，item是源数据数组并且item是数组元素迭代的别名。

接下来我们上一段代码进行详细的介绍，代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-for的使用</title>
    <script src="vue-2.6.10.js"></script>
</head>
<body>
    <div id="app">
        <!-- v-for遍历循环普通数组 -->
        <p v-for="item in list">{{ item }}</p>
        <!-- 可以索引数组下标 -->
        <p v-for="(item,i) in list">索引值:{{ i }}--->每一项:{{ item }}</p>
        <!-- v-for遍历循环对象数组 -->
        <p v-for="user in list2">编号:{{ user.id }}--->姓名:{{ user.name }}</p>
        <!-- v-for在遍历对象的键值对时,除了value,key外,第三个位置还有index -->
        <p v-for="(value,key) in user">值:{{ value }}--->键:{{ key }}</p>
        <!-- v-for迭代数字,count值从1开始 -->
        <p v-for="count in 10">这是第{{ count }}次循环</p>
    </div>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                list:[1,2,3,4,5],
                list2:[
                    {id: 1,name: 'lsq'},
                    {id: 2,name: 'deng'},
                    {id: 3,name: 'zhou'},
                    {id: 4,name: 'cpx'}
                ],
                user: {
                    id: 1,
                    name: 'autumn_leaf',
                    age:22
                },
            }
        });
    </script>
</body>
</html>

以上代码介绍了v-for四种常用的遍历方式，分别是遍历普通数组，对象数组，对象以及数字。在body中<div></div>中我们主要看五行p标签，其中第二行增加了对数组下标的索引，数组下标是以0开头的。在第5行对数字进行迭代遍历时，则是以1开头的。在第4行遍历对象时，我们是以键值对的形式展现出结果，在第3行遍历对象数组时，我们取出了每个对象的编号以及姓名属性。

运行结果如下图所示：

Vue.js03之常用标签v-for,v-if,v-show

接下来我们详细介绍一下v-for标签key属性的使用，先上一段代码，如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-for中key属性使用</title>
    <script src="vue-2.6.10.js"></script>
</head>
<body>
    <div id="app">
        <div>
            <label>编号:
                <input type="text" v-model="id">
            </label>
            <label>姓名:
                <input type="text" v-model="name">
            </label>
            <input type="button" @click="add" value="添加">
        </div>

        <!-- 注意v-for循环key属性只能使用number获取string -->
        <!-- key在使用的时候,必须使用v-bind进行绑定 -->
        <p v-for="item in list" :key="item.id">
            <input type="checkbox">{{ item.id }}--->{{ item.name }}
        </p>
    </div>
    <script>
        var vm = new Vue({
            el: '#app',
            data:{
                id:'',
                name:'',
                list: [
                    {id:1,name:'lsq'},
                    {id:2,name:'deng'},
                    {id:3,name:'zhou'},
                ]
            },
            methods:{
                add(){
                    //this.list.push({id:this.id,name:this.name});
                    this.list.unshift({id:this.id,name:this.name});
                }
            }
        })
    </script>
</body>
</html>

这段代码我们主要用key元素来唯一确定某一个对象，注意key必须要用v-bind进行绑定。

我们在添加按钮上绑定了一个事件，用于随时更新list对象数组中的值，我们可以用push方法直接添加，也可以用unshift默认自动添加，运行截图如下所示：

Vue.js03之常用标签v-for,v-if,v-show

v-if、v-show

v-if根据表达式的值在DOM中生成或者移除一个元素，值是false就会在DOM中删除，反之会克隆相应元素到DOM中
支持加在<template>标签上。

v-show根据表达式的值来显示或者隐藏元素，根据的是display的值，不支持加在<template>标签上。

下面来一段代码，如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-if和v-show的使用</title>
    <script src="vue-2.6.10.js"></script>
</head>
<body>
    <div id="app">
        <input type="button" value="toggle" @click="toggle">
        <!-- v-if的特点:每次都会重新删除或者创建元素 -->
        <!-- v-if有较高的切换性能消耗 -->
        <h3 v-if="flag">这是用v-if控制的元素</h3>
        <!-- v-show的特点:每次不会重新进行DOM的删除和创建操作,只是切换了display:none的样式 -->
        <!-- v-show有较高的初始渲染消耗 -->
        <h3 v-show="flag">这是用v-show控制的元素</h3>
    </div>
    <script>
        var vm = new Vue({
            el:'#app',
            data:{
                flag:true
            },
            methods:{
                toggle(){
                    this.flag = !this.flag
                }
            }
        })
    </script>
</body>
</html>

当我们点击按钮时，两行字会消失；当我们再次点击时，两行字又会出现，如此循环往复。这里我们代码不做太多讲解，重点我们需要比较两者的差别，v-if是每次重新创建或者删除元素，而v-show每次是切换display的样式。当切换性能消耗较高时，我们选择v-show;当初始渲染消耗较高时，我们选择v-if。

好了，本次三个指令讲解就到这里了，我们下期博客见！

Vue.js03之常用标签v-for,v-if,v-show

v-for

v-if、v-show

相关推荐