Vue指令篇_v-for_列表渲染

最近好起来了，蛮好，经历使人成长。在难过的时候没有沉沦，觉得自己蛮棒的。继续好好学习吧，离实现梦想还远着呢，要加油啊！

今天要写的是Vue很香的一个指令v-for，这个指令在结构中实现循环，基于数据多次渲染元素，在减少代码量的情况下，又使得逻辑关系一目了然，很奈斯。不多说啦，就开始吧。

---

目录

1.使用方法

1）v-for中使用数组

2）v-for中使用对象

3）v-for中适用数字

4）v-for中使用字符串

2. key

---

1.使用方法

v-for指令中可以使用数组、对象、数字、以及字符串，下面我们一一举例，首先把vue.js文件引进来

1）v-for中使用数组

语法：(item, index) in items 

其中 items 为源数据数组，item 数组元素别名，index 为索引，可填可不填，举个栗子

    
{
    {index}}——{
    {person}}

const vm = new Vue({
    el: '#app',
    data: {
        persons: ["IronMan", 'CaptainAmerican', 'Holk', 'Thor']
    }
});

【结果】页面渲染如下

 【注】可以利用 of 替代 in 作为分隔符，因为它更接近迭代器的语法，如下

{
    {index}}——{
    {person}}

2）v-for中使用对象

语法：(value, key, index) in Object

其中 value 是对象值；key 为键名，可选填；index 还是索引，也可选填，举个栗子

    
{
    { index }}——{
    { key }}_{
    { value }}

const vm = new Vue({
    el: '#app',
    data: {
        persons: {
            IronMan: 'Tony Stack', 
            CaptainAmerican: 'Steven Steve Rogers',
            Holk: 'Robert Bruce Banner',
        }
    }
});

【结果】

3）v-for中适用数字

语法：n in num

n 为从1开始的数字，栗子如下

    
{
    { n }}

const vm = new Vue({
    el: '#app',
    data: {
        num: 5
    }
});

【结果】

4）v-for中使用字符串

语法：str in string

    
{
    { str }}

const vm = new Vue({
    el: '#app',
    data: {
        string: 'Good Luck'
    }
});

【结果】

【注】可以利用template元素循环渲染一段包含多个元素的内容

const vm = new Vue({
    el: '#app',
    data: {
        heros: {
            IronMan:{
                name: 'Tony Stack',
                player: 'Robert Downey Jr.'
            },
            Holk: {
                name: 'Robert Bruce Banner',
                player: 'Mark Alan Ruffalo'
            }
        }
    }
});

【结果】

2. key

Vue 更新使用 v-for 渲染的元素列表时，它默认使用“就地更新”的策略。如果数据项的顺序被改变，Vue 将不会移动 DOM 元素来匹配数据项的顺序，而是简单复用此处每个元素，如下

    

        {
    { person }}
        
        down
    

const vm = new Vue({
    el: '#app',
    data: {
        persons: ["IronMan", 'CaptainAmerican', 'Holk', 'Thor']
    },
    methods: {
        handleClick(index) {
            const deleteItem = this.persons.splice(index, 1);
            this.persons.splice(index + 1, 0, ...deleteItem)
        }
    }
});

【结果】

在“就地复用”策略中，点击按钮，输入框不随文本一起下移，是因为输入框没有与数据绑定，所以 vue,js 默认使用已经渲染的 dom，然而文本是与数据绑定的，所以文本被重新渲染。这种处理方式在 vue 中是默认的列表渲染策略，因为高效。

这个默认的模式是高效的，但是在更多的时候，我们并不需要这样的处理方式，所以，为了给vue一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，我们需要为每项提供一个唯一key特性，vue会基于key的变化重新排列元素顺序，并且会移除key不存在的元素，栗子如下：

    

        {
    { person }}
        
        down
    

【结果】 

【注】

（1）不建议将数组的索引作为key值，因为如果使用数组的索引作为key值时，页面重新渲染后，元素的key值会重新被赋值。

（2）key值是唯一的，跟后台协作时，传回来的每一条数据都有一个id值，可以用作key值