# 6.for循环/if判断的改变

<template v-for> 在 Vue 2.x 中 <template> 标签不能拥有 key。不过你可以为其每个子节点分别设置 key。

vue2-demo2

<!-- Vue 2.x -->
<template>
    <div class="wrapper">
        <template v-for="item in list">
            <span :key="item.id">{{item.name}}</span>
            <span :key="item.id">{{item.id}}</span>
            <br :key="item.id"/>
        </template>
    </div>
</template>
<script>
export default {
    components: {},
    data() {
        return {            
           list:[
            {
                name:'xiaohua',
                id:12
            },
            {
                name:'xiaowang',
                id:22
            }
           ]
        }
    },
    methods: {
    }
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

在 Vue 3.x 中 key 则应该被设置在 <template> 标签上。

demo19

<!-- Vue 3.x -->
<template>
    <div class="wrapper">
        <template v-for="item in list" :key="item.id">
            <span>{{item.name}}</span>
            <span>{{item.id}}</span>
            <br/>
        </template>
    </div>
</template>

<script>
import {ref} from 'vue';
export default {
    components: {},
    setup(){
        const list = ref([
        {
            name:'xiaohua',
            id:12
        },
        {
            name:'xiaowang',
            id:22
        }
        ])
        return {
            list
        }
    }
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

# v-if 和 v-for 执行顺序问题

2.x 版本中在一个元素上同时使用 v-if 和 v-for 时,v-for 会优先作用。

3.x 版本中 v-if 总是优先于 v-for 生效。

由于语法上存在歧义,建议避免在同一元素上同时使用两者。

vue2中 vue2-demo3

<template>
    <div class="wrapper">
        <template v-for="(item,index) in list" v-if="item>2">
            <div :key="index">{{item}}</div>
        </template>
    </div>
</template>
<script>
export default {
    data() {
        return {            
           list:[1,2,3,4,5]
        }
    }
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

vue3中 demo20

先判断 v-if 导致 找不到 item,如果改成 list.length > 1 即可显示出来。

<template>
    <div class="wraper">
    <div v-for="(item,index) in list" v-if="item>1" :key="index">
        <div>{{item}}<div>
    </div>
    </div>
</template>
<script>
import {ref} from 'vue'
export default {
  setup(){
    const list = ref([1,2,3,4,5])
    return {
      list
    }
  }
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18