解决Vue页面加载时显示{{代码}}问题

解决页面显示时出现vue{{代码}}的情况

盼你渡口

2974人浏览 · 2022-10-10 20:54:42

盼你渡口 · 2022-10-10 20:54:42 发布

因为html的加载顺序如下：解析html结构 -> 加载外部脚本和样式表文件 -> 解析并执行脚本代码 -> 构造html dom模型 -> 加载图片等外部文件 -> 页面加载完毕。
　　所以，当html加载的时候，就会把{{}} 当成文本加载出来，当vue初始化完成后，才会把{{}}解析成vue的语法，所以就会出现html页面加载时会显示{{代码}}的问题。
　　如果把引入vue.js的script放到head里面，那页面不会出现{{}}，因为在body之前就把vue引入进来了，vue加载完成了。

还有一种就是使用v-cloak

<html>
<head>
    <meta charset="UTF-8">
    <title>xxx</title>
    <!--格式如下可-->
    <script src="js/vue.js"></script>
</head>
<body>
</body>
</html>

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^