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