Vue this.$refs gets the difference between static and dynamic elements

<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>

print result:

clipboard.png

the question is:
Why $refs can only get one static li element, while the dynamic one can get more than one. Please give me some advice

.
Apr.29,2021

ref is equivalent to an id, reference to an element or component that is overwritten by adding $refs, after the first way of writing, which must be unreasonable, id repetition. The second kind of vue has special processing for for, refer to the documentation.

when ref and v-for are used together, the reference you get will be an array of these subcomponents of the corresponding data source.

ide/components-edge-cases.html-sharp%E8%AE%BF%E9%97%AE%E5%AD%90%E7%BB%84%E4%BB%B6%E5%AE%9E%E4%BE%8B%E6%88%96%E5%AD%90%E5%85%83%E7%B4%A0" rel=" nofollow noreferrer "> https://cn.vuejs.org/v2/guide.

MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1e9a7fb-17e5.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1e9a7fb-17e5.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?