vue this.$refs获取静态元素和动态元素的区别

Question

<template>
    <div class="warpper">
        <button @click="alert">test</button>
        <ul >
            <li  ref="lk" key="22">lk</li>
            <li  ref="lk" key="21">lk</li>
            <li v-for="i in 4" ref="li" :key="i">li</li>
        </ul>
    </div>
</template>

<script>
export default{
    methods:{
        alert(){
            var lk=this.$refs.lk
            var li=this.$refs.li
            console.log(lk)
            console.log(li)
        }
    },
}
</script>

打印结果：

问题是：
为什么$refs获取静态的li元素只能获取一个，而动态的可以获取多个，请大神指点

Answer 1

ref 相当一给元素或组件一个id，引用加在$refs,第一种写法后面的就把前面的覆盖了，这样写肯定不合理，id重复 。第二种vue有做for的特殊处理，参考文档。

当 ref 和 v-for 一起使用的时候，你得到的引用将会是一个包含了对应数据源的这些子组件的数组。

https://cn.vuejs.org/v2/guide...