vue方法

Posted 2022-04-26 newbest

记录是为了更好的成长！

 

1、Vue.$nextTick()

网上搜一下资料很多，这里只做最通俗的说明：

Vue.$nextTick() 会在页面的DOM发生了变化之后自动执行，如果要获取最新的变化就需要用Vue.$nextTick()回调来做，也可以做其他的逻辑操作

<template>
    <div class="hello">
        <div class="hello">
            <div>
                <button @click="myclick()" ref="aa">msg</button>
            </div>
        </div>
    </div>
</template>

<script>
    export default 
        name: ‘HelloWorld‘,
        data() 
            return 
                msg: ‘原始值‘
            
        ,
        methods: 
            myclick: function() 
                let that = this;
                that.msg = "修改后的值";
                //console.log(that.$refs.aa.innerText); //that.$refs.aa获取指定DOM，输出：原始值
                that.$nextTick(function()
                    console.log("dom更新了")
                        console.log("$nextTick:"+that.$refs.aa.innerText);  //输出：修改后的值
                );
                
        
    
</script>

<style scoped>

</style>

 

 

 

以上内容代表个人观点，仅供参考，不喜勿喷。。。