Vue异步获取数据后获取Dom元素的高度

最新推荐文章于 2024-12-10 23:21:19 发布

初学者中的小白

最新推荐文章于 2024-12-10 23:21:19 发布

阅读量2k

点赞数

分类专栏： vue

本文链接：https://blog.youkuaiyun.com/qq_41671718/article/details/108348057

版权

vue 专栏收录该内容

2 篇文章

订阅专栏

vm.$nextTick( [callback] )

将回调延迟到下次 DOM 更新循环之后执行。在修改数据之后立即使用它，然后等待 DOM 更新。

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
</head>

<body>
    <div id="app">
        <ul>
            <li ref="li" v-for="(item,index) in list" :key="index">{{item.type}}</li>
        </ul>
        <button @click="getData">获取数据</button>
    </div>
    <script>
        let vm = new Vue({
            el: "#app",
            data: {
                list: ''
            },
            methods: {
                getData() {
                    let url = 'https://api.apiopen.top/getJoke?page=1&count=2&type=video';
                    let that = this;
                    $.ajax({
                        url: url,
                        type: 'GET',
                        success(data) {
                            console.log(data);
                            that.list = data.result;
                            console.log(that.$refs.li);
                            // 获取到数据时使用
                            that.$nextTick(() => {
                                console.log(that.$refs.li, 'nextTick');
                            });
                        },
                        fail(err) {
                            console.log(err);
                        }
                    });
                }
            },
            watch: {
                // 监听属性，数据变化时使用，如果监听属性还会改变就不合适这样使用
                list() {
                    this.$nextTick(() => {
                        console.log(this.$refs.li, 'watch');
                    });
                }
            }
        });
    </script>
</body>

</html>