Vue条件渲染和列表渲染

作者: nzdnllm | 来源:发表于2019-10-09 23:15 被阅读0次

Vue条件渲染和列表渲染
2019-03-09 Vue基础知识
条件和列表渲染
6.vue中的条件渲染&列表渲染
vue--条件渲染、列表渲染
条件渲染和列表渲染
art-template
6-Vue 条件渲染和列表渲染
vue列表渲染
列表渲染与条件渲染

1.条件渲染

v-if 根据此指令可决定是否会在页面展示当前标签

 <div id="app">
        <div v-if="show">{{message}}</div>
    </div>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                show:false,
                message: 'Hello Word'
            }
        })
    </script>

上述代码不展示 div标签内容，我们在控制台查看，是没有渲染带有v-if指令的div标签

show=false

若我们将show的值变更为true,则div标签中的内容即可展示在页面上

show=true
此时我们查看控制台，页面渲染了带有v-if指令的div标签

image.png

v-show
使用v-show实现，在页面展示上并没有什么不同,但是我们查看控制台会发现无论show的值为true或者false，页面都会渲染v-show的标签

v-show

v-if和v-show都能够控制一个模板标签是否展示，但是v-if标签对应表达式一旦为false，其对应的标签就不会在dom上了；但是v-show对应的表达式为false，其对应的标签仍会显示在dom上；所以v-show的性能会高一些，它不会频繁的把一个标签在dom上删除再添加

对于v-if更复杂的使用（else&else if）
就如同我们在其他代码中的用的那样，if和else还有else if在vue中同样适用

<div id="app">
        <div v-if="show" >{{message}}</div>
        <div v-else>Bye Word!</div>
    </div>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                show:false,
                message: 'Hello Word'
            }
        })
    </script>

这时候我们查看控制台和页面展示，显示的是else标签的数据

v-else

注意：v-if和v-else必须紧贴在一起使用,v-else-if也同样适用。

<div id="app">
        <div v-if="show ==='a'" >This is A </div>
        <div v-else-if="show ==='b'">This is B</div>
        <div v-else>Bye Word!</div>
    </div>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                show:'a'
            }
        })
    </script>

v-else-if

关于input标签的key值
我们给v-if 标签和v-else标签中添加input标签

<div id="app">
        <div v-if="show" >
            用户名：<input />
        </div>
        <div v-else>
            邮箱账户：<input />
        </div>
    </div>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                show:false
            }
        })
    </script>

input

这时候我们在input框中输入内容后操作控制台，将show的值变为true,这时候我们发现input框中的数据没有更新，原因是vue在重新渲染页面时会尽量尝试复用已有的dom

input

解决办法是给input标签添加key值

<div id="app">
        <div v-if="show" >
            用户名：<input key="username"/>
        </div>
        <div v-else>
            邮箱账户：<input key="mail"/>
        </div>
    </div>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                show:false
            }
        })
    </script>

这时我们可以看到当show=true时页面重新渲染，此时input中的数据更新

inputkey

2.列表渲染
首先我们看一个最基础的列表渲染，使用v-for循环列表中的每个元素内容item，每个元素的索引index

<div id="app">
        <div v-for="(item,index) of list">
            {{item}}--{{index}}
        </div>
    </div>
    <script>
        var vm = new Vue({
            el:"#app",
            data:{
                list:[
                    "Hello",
                    "vue",
                    "Nice",
                    "to",
                    "meet",
                    "you"
                ]
            }
        })
    </script>

页面展示如下：

列表内容和索引展示

给v-for所在标签增加唯一的key值会提高性能，key值要求唯一，但是不建议使用元素的索引index，会导致dom没有办法重复的复用dom节点，建议使用数据的唯一标识作为key值，也是提高性能的最优写法，改写如下，页面展示不变：

<div id="app">
        <div v-for="(item,index) of list" :key="item.id">
            {{item.text}}--{{index}}
        </div>
    </div>
    <script>
        var vm = new Vue({
            el:"#app",
            data:{
                list:[{
                    id:"01012001",
                    text:"Hello"
                },{
                    id:"01012002",
                    text:"Vue"
                },{
                    id:"01012003",
                    text:"Nice"
                },{
                    id:"01012004",
                    text:"to"
                },{
                    id:"01012005",
                    text:"meet"
                },{
                    id:"01012006",
                    text:"you"
                }
                ]
            }
        })
    </script>

修改list中的数据不能直接使用下标，可以使用vue提供的方法，可以通过改变引用来改变list中的数据
vue提供的方法：

1.pop 把数组中最后一项删除
2.push 向数组中增加一条数据
3.shift 删除数组的第一项
4.unshift 向数组的第一项中加内容
5.spilce 可以截取数组
6.sort 对数组进行排序
7.reverse 对数组进行取反

splice方法改变list中的数据

改变引用，即将list对象指向其他地址

通过改变引用改变list中的数据

template 模板占位符
用于包裹一些标签，使得这些标签中的内容进行循环展示而不需要编写多余的循环代码，并且template在页面加载时不会渲染到页面上。

<div id="app">
        <template v-for="(item,index) of list" :key="item.id">
            <div >
                {{item.text}}--{{index}}
            </div>
            <span>
                {{item.text}}--{{index}}
            </span>
        </template>
    </div>

对象的循环渲染以及修改
首先遍历对象的数据

<div id="app">
        <div v-for="(item,key,index) of userInfo">
            {{item}} -- {{key}} -- {{index}}
        </div>
    </div>
    <script>
        var vm = new Vue({
            el:"#app",
            data:{
                userInfo:{
                    name:"test1",
                    age:28,
                    gender:"male",
                    salary:"secret"
                }
            }
        })
    </script>

页面展示如下：