在Vue2.X的项目中，如何动态设置标签顺序？

Question

<template>
    <div>
        <!-- ??? -->
    <div>
</template>
<script>
    import TemplateA form 'A.vue'
    import TemplateB form 'B.vue'
    import TemplateC form 'C.vue'
    ···
    export default {
            data() {
                return {
                    list: [c, b, c]
                }
            },
        }
    }
</script>

需要将A/B/C个模块挂载在 div 标签上，顺序由list 决定。
我需要怎么做？
我能想到的只有css的绝对定位, 但是只是在视觉上的，实际上没改变标签的顺序。如果不用这个方法的话，能有更好的解决方法吗？
谢谢。

Answer 1

使用动态组件呢 文档

Answer 2

<template>
    <div v-for="(result, index) in dom">
        <div :is="result"></div>
    <div>
</template>
<script>
    import TemplateA form 'A.vue'
    import TemplateB form 'B.vue'
    import TemplateC form 'C.vue'
    ···
    export default {
            data() {
                return {
                    dom:[],
                    list: ["c", "b", "c"]
                }
            },
            mounted(){
                for (let i == 0; i < list.length; i++){
                    if (list[i] == 'a') {
                    this.dom.push(TemplateA)
                    } else if (list[i] == 'b') {
                    this.dom.push(TemplateB)
                    } else if (list[i] == 'c') {
                    this.dom.push(TemplateC)
                    }
                }
            
            }
        }
    }
</script>