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

码农世界
  • 731
<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>

打印结果:

clipboard.png

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

回复
阅读 5.2k
1 个回答
✓ 已被采纳

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

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

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

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
你知道吗?

宣传栏