vue学习笔记(五)条件渲染和列表渲染

时间 2019-11-17 标签 vue 学习笔记五条件渲染列表渲染

前言

在众多的编程语言中，咱们的基础语法老是少不了一些专业语法，好比像定义变量，条件语句，for循环，数组，函数等等，vue.js这个优秀的前端框架中也有一样的语法，咱们换一个名词，将条件语句改为专业词汇叫作条件渲染，循环语句改为专业词汇叫作列表渲染，这样比较舒服一点。javascript

本章目标

学会条件渲染的使用css
学会可复用的key的使用html
学会列表渲染的使用前端

条件渲染

1.v-if的使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<div id="app01">
    <span v-if="type==='A'">成绩为A</span>
</div>
<script src="../js/vue.js"></script>
<script>
    let vm=new Vue({
        el:'#app01',
        data:{
            type:'A'
        },
        methods:{
            
        },
        watch:{
            
        },
        computed:{
            
        }
    })
</script>
</body>
</html>

结果：成绩为Avue

v-if判断条件是否相等，就像if同样，若是相等，那么值就会true,与之对应的还有v-else,v-else-ifjava

2.v-else的使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<div id="app01">
    <span v-if="type==='A'">成绩为A</span>
    <span v-else>成绩为B</span>
</div>
<script src="../js/vue.js"></script>
<script>
    let vm=new Vue({
        el:'#app01',    
        data:{
            type:'B'
        },
        methods:{
            
        },
        watch:{
            
        },
        computed:{
            
        }
    })
</script>
</body>
</html>

结果:成绩为B编程

小练习

咱们作一个小练习，巩固一下v-if和v-else的使用，需求以下：点击一个按钮时,按钮上的文字变为显示，再次点击时按钮上的文字变为隐藏，当按钮上的文字显示隐藏时，显示红色，按钮上的文字变为显示时显示蓝色数组

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            .box{
                width: 100px;
                height: 100px;
            }
            .red{
                background: red;
            }
            .blue{
                background: blue;
            }
        </style>
    </head>
    <body>
        <div id="app">
            <button @click="handleClick">{{text}}</button>
            <div v-if="show" class="box red"></div>
            <div v-else class="blue box"></div>
        </div>
        <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            let vm=new Vue({
                el:'#app',
                data:{
                    show:true,
                    text:'隐藏'
                },
                methods:{
                    handleClick(){
                        this.show=!this.show;
                        this.text=this.show?'隐藏':'显示'
                    }
                }
            })
            
        </script>
    </body>
</html>

结果

3.v-else-if的使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<div id="app01">
    <input type="text" v-model="type"/>
    <div v-if="type==='A'">成绩为A</div>
    <div v-else-if="type==='B'">成绩为B</div>
    <div v-else-if="type==='C'">成绩为C</div>
    <div v-else>不及格</div>
</div>
<script src="../js/vue.js"></script>
<script>
    let vm=new Vue({
        el:'#app01',    
        data:{
            type:''
        },
        methods:{
            
        },
        watch:{
            
        },
        computed:{
            
        }
    })
</script>
</body>
</html>

结果:

4.v-show

提及这个v-show，其实和v-if有与曲同工的妙处，可是又有不一样的地方，咱们来看下示例你就秒懂了前端框架

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            .box{
                width: 100px;
                height: 100px;
            }
            .red{
                background: red;
            }
            .blue{
                background: blue;
            }
        </style>
    </head>
    <body>
        <div id="app">
            <div v-show="show" class="box red"></div>
            <button @click="handleClick()">{{text}}</button>
        </div>
        <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            let vm=new Vue({
                el:'#app',
                data:{
                    show:true,
                    text:'隐藏',
                },
                methods:{
                    handleClick(){
                        this.show=!this.show;
                        this.text=this.show?'隐藏':'显示'
                    }
                },
                computed:{
                    
                }
            })
        </script>
    </body>
</html>

当按钮变为显示的时候，背景颜色消失，这里就不截图了，有兴趣的小伙伴能够本身去尝试，既然v-if能够帮咱们实现元素的显示和隐藏，那咱们还须要v-show干什么呢？不妨看下接下来的实例。app

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            .box{
                width: 100px;
                height: 100px;
            }
            .red{
                background: red;
            }
            .blue{
                background: blue;
            }
        </style>
    </head>
    <body>
        <div id="app">
            <div v-show="show" class="box red"></div>
            <div class="box blue" v-if="show"></div>
            <button @click="handleClick()">{{text}}</button>
        </div>
        <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            let vm=new Vue({
                el:'#app',
                data:{
                    show:true,
                    text:'隐藏',
                },
                methods:{
                    handleClick(){
                        this.show=!this.show;
                        this.text=this.show?'隐藏':'显示'
                    }
                },
                computed:{
                    
                }
            })
        </script>
    </body>
</html>

当咱们点击按钮的时候

如今结果已经出来了，使用v-show的dom元素，dom元素只是简单的切换display属性，而v-if会将dom元素移除，当咱们再次点击时，v-if又会从新渲染元素，可想而知若是频繁的切换的话，那么有多么的耗费性能，所以我总结了以下几点

频繁的切换显示/隐藏要使用v-show
只判断一次时，使用v-if

5.减小dom的生成

咱们都知道js操做dom元素是很是消耗性能的，可是咱们须要尽可能的避免这个问题，vue中为咱们提供了一个template标签，这个标签叫作模板(至于什么叫作模板，后期的博客会讲到)，咱们先看一个示例

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            .box{
                width: 100px;
                height: 100px;
            }
            .red{
                background: red;
            }
            .blue{
                background: blue;
            }
        </style>
    </head>
    <body>
        <div id="app">
            <div v-if="show">
                <div class="box red"></div>
                <div class="box blue"></div>
            </div>
        </div>
        <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            let vm=new Vue({
                el:'#app',
                data:{
                    show:true,
                },
                methods:{
                    
                },
                computed:{
                    
                }
            })
        </script>
    </body>
</html>

咱们想让图上的那个div消失，不想为了管理同一组元素而多生成一个节点，这样是很是消耗性能的，咱们将div标签变成template标签

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            .box{
                width: 100px;
                height: 100px;
            }
            .red{
                background: red;
            }
            .blue{
                background: blue;
            }
        </style>
    </head>
    <body>
        <div id="app">
            <div v-if="show">
                <div class="box red"></div>
                <div class="box blue"></div>
            </div>
            <template v-if="show">
                <div class="box red"></div>
                <div class="box blue"></div>
            </template>
        </div>
        <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            let vm=new Vue({
                el:'#app',
                data:{
                    show:true,
                },
                methods:{
                    
                },
                computed:{
                    
                }
            })
        </script>
    </body>
</html>

View Code

如今我有心中萌生了一个想法，v-if可使用template,那么v-show是否可使用呢？

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            .box{
                width: 100px;
                height: 100px;
            }
            .red{
                background: red;
            }
            .blue{
                background: blue;
            }
        </style>
    </head>
    <body>
        <div id="app">
            <template v-if="show">
                <div class="box red"></div>
                <div class="box blue"></div>
            </template>
            <template v-show="show">
                <div class="box red"></div>
                <div class="box blue"></div>
            </template>
            <button @click="handleClick()">{{text}}</button>
        </div>
        <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            let vm=new Vue({
                el:'#app',
                data:{
                    show:true,
                    text:'隐藏',
                },
                methods:{
                    handleClick(){
                        this.show=!this.show;
                        this.text=this.show?'隐藏':'显示'
                    }
                },
                computed:{
                    
                }
            })
        </script>
    </body>
</html>

View Code

答案是v-if可使用template，而v-show不能使用template

vue中用key管理可复用的元素

Vue 会尽量高效地渲染元素，一般会复用已有元素而不是从头开始渲染。这么作除了使 Vue 变得很是快以外，还有其它一些好处。例如，若是你容许用户在不一样的登陆方式之间切换。

示例一：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<div id="app01">
    <template v-if="type==='username'">
        <label>用户名</label>
        <input type="text" placeholder="请输入您的帐号" />
    </template>
    <template v-else>
        <label>邮箱</label>
        <input type="text" placeholder="请输入您的邮箱" />
    </template>
    <p>
        <a href=""@click.prevent="type='username'">用户名登陆</a>|
        <a href=""@click.prevent="type='email'">邮箱登陆</a>
    </p>
</div>
<script src="../js/vue.js"></script>
<script>
    let vm=new Vue({
        el:'#app01',    
        data:{
            isShow:true,
            type:'username'
        },
        methods:{
            
        },
        watch:{
            
        },
        computed:{
            
        }
    })
</script>
</body>
</html>

结果：

当咱们在用户名登陆和邮箱切换的时候，咱们发现咱们输入的内容始终保持，为何呢?总的来讲，由于两个模板使用了相同的元素，input不会被替换掉——仅仅是替换了它的 placeholder属性，这样也不老是符合实际需求，因此 Vue 为你提供了一种方式来表达这两个元素是彻底独立的,不要复用它们,只需添加一个具备惟一值的key属性便可。

示例二:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<div id="app01">
    <template v-if="type==='username'">
        <label>用户名:</label>
        <input type="text" placeholder="请输入您的用户名"  key='usename'/>
    </template>
    <template v-else>
        <label>邮箱:</label>
        <input type="text" placeholder="请输入您的邮箱"  key='email'/>
    </template>
    <p>
        <a href=""@click.prevent="type='username'">用户名登陆</a>|
        <a href=""@click.prevent="type='email'">邮箱登陆</a>
    </p>
</div>
<script src="../js/vue.js"></script>
<script>
    let vm=new Vue({
        el:'#app01',    
        data:{
            isShow:true,
            type:'username'
        },
        methods:{
            
        },
        watch:{
            
        },
        computed:{
            
        }
    })
</script>
</body>
</html>

结果：

如今咱们点击切换的时候，输入框都会从新渲染，固然咱们的<label>标签依旧的高效的复用，由于它没有添加key。

列表渲染

咱们用v-for指令根据一组数组的选项列表进行渲染，v-for指令须要以item in items的形式的特殊语法，items是原数据数组而且item是元素迭代的别名

1.v-for的基本使用

语法：(item,index) in|of items

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>v-for的基本使用</title>
    </head>
    <body>
        <div id="app">
            <ul>
                <li v-for="(item) in arr">{{item}}</li>
            </ul>
        </div>
        <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            let vm=new Vue({
                el:'#app',
                data:{
                    arr:['apple','banana','pear']
                },
                methods:{
                    
                },
                computed:{
                    
                }
            })
        </script>
    </body>
</html>

结果：

固然v-for中也能够带第二个参数index

2.v-for中带索引

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>v-for的基本使用</title>
    </head>
    <body>
        <div id="app">
            <ul>
                <li v-for="(item,index) in arr">{{item}}--{{index}}</li>
            </ul>
        </div>
        <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            let vm=new Vue({
                el:'#app',
                data:{
                    arr:['apple','banana','pear']
                },
                methods:{
                    
                },
                computed:{
                    
                }
            })
        </script>
    </body>
</html>

View Code

3.v-for迭代字符串

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>v-for的基本使用</title>
    </head>
    <body>
        <div id="app">
            <ul>
                <li v-for="(item,index) in arr">{{item}}--{{index}}</li>
            </ul>
            <ul>
                <li v-for="item in 'helloworld'">{{item}}</li>
            </ul>
        </div>
        <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            let vm=new Vue({
                el:'#app',
                data:{
                    arr:['apple','banana','pear']
                },
                methods:{
                    
                },
                computed:{
                    
                }
            })
        </script>
    </body>
</html>

View Code

4.v-for迭代对象

语法：(value,key,index) of | in items

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>v-for迭代对象</title>
    </head>
    <body>
        <div id="app">
            <ul>
                <li v-for="(value,key,index) of obj">{{value}}-{{key}}-{{index}}</li>
            </ul>
        </div>
        <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            let vm=new Vue({
                el:'#app',
                data:{
                    obj:{
                        name:'kk',
                        age:18,
                        sex:'male'
                    }
                },
                methods:{
                    
                },
                computed:{
                    
                }
            })
        </script>
    </body>
</html>

结果:

5.v-for迭代整数

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>v-for迭代对象</title>
    </head>
    <body>
        <div id="app">
            <ul>
                <li v-for="(value,key,index) of obj">{{value}}-{{key}}-{{index}}</li>
            </ul>
            <ul>
                <li v-for="item in 10">{{item}}</li>
            </ul>
        </div>
        <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            let vm=new Vue({
                el:'#app',
                data:{
                    obj:{
                        name:'kk',
                        age:18,
                        sex:'male'
                    }
                },
                methods:{
                    
                },
                computed:{
                    
                }
            })
        </script>
    </body>
</html>

结果：

注意：但咱们迭代整数的时候，item从1开始而不是从0开始

总结

在本章内容中，咱们一共学习了三个知识点，分别是条件渲染的使用(v-if,v-else,v-else-if),管理可复用的key,列表渲染(v-for的基本使用等等)，本章的内容也多可是在实际应用上很是普遍，毕竟这些是很是基础的语法，基础不牢，地动山摇，学习任何东西都须要本身一步一个脚印走出来。