window.onload下vue的dom层数据无法被修改解决

tcliuwenwen

已于 2022-02-20 23:53:52 修改

阅读量1.4k

点赞数

分类专栏： JavaScript 文章标签： vue.js 前端 javascript

于 2022-01-23 16:41:15 首次发布

本文链接：https://blog.youkuaiyun.com/tcliuwenwen/article/details/122653281

版权

JavaScript 专栏收录该内容

9 篇文章

订阅专栏

博文背景

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

    <script>
        window.onload=function() {
	        const app=new Vue({
	            el: "#myapp",
	            data: {
	                info: "Hello World!!!",
	                flag: true
	            }
	        })
        }
    </script>
</head>

<body>
    <div id="myapp" v-if="flag">
        {{ info }}
    </div>
</body>
</html>

vue文档
web console
这里其实还犯了一个错误，我们需要修改的是app对象而不是myapp标签

解决办法

首先呢，看到别人博客上面写的可以整
https://www.cnblogs.com/sanduzxcvbnm/p/13521729.html

然后比较差别，发现把我的script放在body闭合标签之前就可以了

原理大概和window.onload这些玩意的作用域还有什么加载顺序之类的有关系

https://www.cnblogs.com/xumqfaith/p/8036214.html

更新代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

    <script>
    	// 在函数外部声明app即可
        let app=null;
        window.onload=function() {
            app=new Vue({
                el: "#myapp",
                data: {
                    info: "Hello World!!!",
                    flag: true
                }
            })
        }
    </script>
</head>

<body>
    <div id="myapp" v-if="flag">
        {{ info }}
    </div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

    <script>
        window.onload=function() {
        	// 把app绑定到window上面即可
            window.app=new Vue({
                el: "#myapp",
                data: {
                    info: "Hello World!!!",
                    flag: true
                }
            })
        }
    </script>
</head>

<body>
    <div id="myapp" v-if="flag">
        {{ info }}
    </div>
</body>
</html>

web console