VUE-ref

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>

你可能感兴趣的:(vue,vue.js)