VUE-ref

最新推荐文章于 2023-12-06 17:18:52 发布

十里顾情欢

最新推荐文章于 2023-12-06 17:18:52 发布

阅读量620

点赞数

分类专栏： vue 文章标签： vue.js

本文链接：https://blog.csdn.net/qq_45368052/article/details/105990538

版权

vue 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

ref 用来获取 DOM元素
写了好几个ref 它只能获取最后一个
如果是用v-for循环出来的他能获取一组 DOM元素

VUE 的 DOM更新是异步的

$nextTick 接收一个回调函数该回调函数会在下一次DOM更新完成之前触发类似一个事件池

this.$nextTick(() => {
	console.log(this.$refs.qqq);   //控制台输出6个元素
})

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <!-- 
            ref 用来 获取 DOM元素
            写了好几个ref 它只能获取一个 写死的方式只能获取最后一个
            如果是用v-for循环出来的他能获取一组 DOM元素
         -->

        <!-- <h1 ref="qqq">{{name}}1</h1>
        <h1 ref="qqq">{{name}}2</h1>
        <h1 ref="qqq">{{name}}3</h1>
        <h1 ref="qqq">{{name}}4</h1> -->

        <h1 ref="qqq" v-for="i in ary">{{name}}{{i}}</h1>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        let vm = new Vue({
            el: "#app",
            data: {
                name: "清欢",
                ary: [1, 2, 3, 4]
            },
            mounted() {
                // VUE 的 DOM更新是异步的
                console.log(this.$refs.qqq);   //控制台输出4个元素
                this.ary.push(5, 6)
                console.log(this.$refs.qqq);   //控制台输出4个元素
                // $nextTick 接收一个回调函数 该回调函数会在下一次DOM更新完成之前触发   类似一个 事件池
                this.$nextTick(() => {
                    console.log(this.$refs.qqq);   //控制台输出6个元素
                })
            }
        })
    </script>
</body>

</html>

十里顾情欢

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
VUE-ref

ref 用来获取 DOM元素写了好几个ref 它只能获取最后一个如果是用v-for循环出来的他能获取一组 DOM元素VUE 的 DOM更新是异步的$nextTick 接收一个回调函数该回调函数会在下一次DOM更新完成之前触发类似一个事件池this.$nextTick(() => { console.log(this.$refs.qqq); //控制台输出6个元素...
复制链接

扫一扫

专栏目录