Vue.js学习笔记(3.v-for的学习)

v-for

循环普通数组

<!--- html--->
<div id="app">
    <p v-for="(item,i) in list">索引值:{{i}},:{{item}}</p>
</div>

<!--- js--->
var app = new Vue({
    el:'#app',
    data:{
        list:[1,2,3,4,5]
    },
    methods:{}
})

页面渲染结果为:
v-for

循环对象数组

<!--- html--->
<div id="app">
    <p v-for="item in list">id:{{item.id}},name:{{item.name}}</p>
</div>

<!--- js--->
var app = new Vue({
    el: '#app',
    data: {
        list: [
            { id: 1, name: 'a' },
            { id: 2, name: 'b' },
            { id: 3, name: 'c' },
            { id: 4, name: 'd' }
        ]
    },
    methods: {}
})

页面渲染结果为:
v-for

循环对象

<!--- html--->
<div id="app">
    <p v-for="(val, key, i) in person">{{key}} : {{val}}  --- 索引:{{i}}</p>
</div>

<!--- js--->
var app = new Vue({
    el: '#app',
    data: {
        person:{
            name:'welkin',
            age:20,
            sex:'男'
        }
    },
    methods: {}
})

页面渲染结果为:
v-for

迭代数字

<!--- html--->
<div id="app">
    <!-- 迭代数字时 count 的值从 1 开始 -->
    <p v-for="count in 10">这是第{{count}}次循环</p>
</div>

<!--- js--->
var app = new Vue({
    el: '#app',
    data: {},
    methods: {}
})

页面渲染结果为:
v-for

key的作用

key的主要作用就是用来提高渲染性能的!

当 Vue.js 用v-for正在更新已渲染过的元素列表时,它默认用“就地复用”策略。如果数据项的顺序被改变,Vue 将不会移动 DOM 元素来匹配数据项的顺序, 而是简单复用此处每个元素,并且确保它在特定索引下显示已被渲染过的每个元素。

<!--- html--->
<div id="app">
    <input type="button" value="+1" @click="listUnshift">
    <p v-for="item in list">
        <input type="checkbox">value:{{item}}
    </p>
</div>

<!--- js--->
var app = new Vue({
    el: '#app',
    data: {
        list:[1,2,3,4,5]
    },
    methods: {
        listUnshift(){
            this.list.unshift(0)
        }
    }
})

我们首先设置一个Vue实例,里面包含一个数组list:[1,2,3,4,5],此时页面渲染应该为下图所示
key

我们为其value:2打上勾,但是当我们点击按钮,将数组更改为list:[0,1,2,3,4,5]时,页面渲染如下:
key
此时就出现了问题:本身打的勾应该在value:2上,而实际上在value:1上,这就是因为没有使用key属性,此时页面渲染的顺序为原先内容为 1 的 <p> 元素内容变成0,原先内容为 2 的 <p> 元素内容变成 1 ,……以此类推,最后新增一个<p>元素,内容为 5。
在这种情况下,Vue会通过改变原来元素的内容和增加/减少元素来完成这个改变,因为没有key属性,Vue无法跟踪每个节点,只能通过这样的方法来完成变更。

而当我们增加一个key属性后:

<!--- html--->
<div id="app">
    <input type="button" value="+1" @click="listUnshift">
    <p v-for="item in list" :key="item">
        <input type="checkbox">value:{{item}}
    </p>
</div>

<!--- js--->
var app = new Vue({
    el: '#app',
    data: {
        list:[1,2,3,4,5]
    },
    methods: {
        listUnshift(){
            this.list.unshift(0)
        }
    }
})

点击按钮后页面便会正常渲染,此时页面的渲染顺序为新增一个<p>元素,它的内容为 0 ,并将它插入原先内容为 1 的元素之前。
key
在有了key属性之后,Vue会记住元素们的顺序,并根据这个顺序在适当的位置插入/删除元素来完成更新,这种方法比没有key属性时的就地复用策略效率更高。

注意事项

注意:v-for 循环时,key 属性只能使用 number 或者 string ,并且必须使用 v-bind 来绑定 key 的值

已标记关键词 清除标记
©️2020 CSDN 皮肤主题: 游动-白 设计师:上身试试 返回首页