八. Vue.js数据更新后dom操作-vue.nextTick

最新推荐文章于 2023-04-10 16:26:02 发布

小虫信息科技

最新推荐文章于 2023-04-10 16:26:02 发布

阅读量408

点赞数

分类专栏： vue2.0 文章标签： nextTick 数据更新操作dom

本文链接：https://blog.csdn.net/lml_little/article/details/116859266

版权

vue2.0 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

Vue响应式并不是数据发生改变后DOM 立即发生改变，而是按一定的策略进行 DOM 的更新，所有当我们改变数据时，立即对改变的DOM处理时就会出错，最明显的就是使用v-if或v-for的时候，针对这种改变数据要对DOM操作，Vue.nextTick起了重要作用

<!DOCTYPE html>
<html>
    <body>
        <div id="app">
            <p ref="myWidth" v-if="showMe">{{ message }}</p>
            <button @click="getMyWidth">获取p元素宽度</button>
        </div>
    </body>
    <script src="js/vue.js"></script>
    <script>
        
         /*定义vue实例app2*/
        var app2 = new Vue({
            el: '#app2',
            data: {
                message: '你好！我时nextTick'
             },
            methods: {
                getMyWidth() {
                    this.showMe = true;
                   //this.message = this.$refs.myWidth.offsetWidth;
                    //报错 TypeError: this.$refs.myWidth is undefined
                    this.$nextTick(()=>{
                        //dom元素更新后执行，此时能拿到p元素的属性
                        this.message = this.$refs.myWidth.offsetWidth;
                     })
                }
            }
        });

        
    </script>
</html>

小虫信息科技

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
八. Vue.js数据更新后dom操作-vue.nextTick

Vue响应式并不是数据发生改变后DOM 立即发生改变，而是按一定的策略进行 DOM 的更新，所有当我们改变数据时，立即对改变的DOM处理时就会出错，最明显的就是使用v-if或v-for的时候，针对这种改变数据要对DOM操作，Vue.nextTick起了重要作用<!DOCTYPE html><html> <body> <div id="app"> <p ref="myWidth" v-if="show
复制链接

扫一扫

专栏目录