vue用v-cloak指令解决打开页面显示{{}}问题

谁借莪１个温暖的怀抱￠ 2023-10-02 16:26 15阅读 0赞

### 背景 ###

当网络较慢，网页还在加载 Vue.js ，而导致 Vue 来不及渲染，这时页面就会显示出 Vue 源代码 , 具体是显示一些`{ {}}`。就可以使用 `v-cloak 指令`\+ `v-cloak样式` 来解决这一问题 （缺一不可）。

例如以下html,打开则会显示`{ {text}}` ，一闪而过

<div id="app">
      {
        {
        text}}
    </div>
    
    <script>
      var app = new Vue({
        
        el: '#app',
        data: {
        
          text:'https://zhengkai.blog.csdn.net/'
        }
      });
    </script>

### 解决方案 ###

<!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>vue用v-cloak指令解决打开页面显示{
       {}}问题</title>
        <meta name="author" content="zhengkai.blog.csdn.net">
    </head>
    <style>
        [v-cloak] {
          
            display: none;
        }
    </style>
    
    <body>
    	
    	<div id="app" v-cloak>
    		{
       {text}}
    	</div>
    </body>
    
    <script>
    	var app = new Vue({
          
    	  el: '#app',
    	  data: {
          
    	  	text:'https://zhengkai.blog.csdn.net/'
    	  }
    	});
    </script>
    </html>

发表评论取消回复

表情：

评论列表（有 0 条评论，15人围观）

还没有评论，来说两句吧...

相关阅读

相关 vue用v-cloak指令解决打开页面显示{{}}问题

背景当网络较慢，网页还在加载 Vue.js ，而导致 Vue 来不及渲染，这时页面就会显示出 Vue 源代码 , 具体是显示一些`{ {}}`。就可以使用 `v-clo

谁借莪１个温暖的怀抱￠/ 2023年10月02日 16:26/ 0 赞/ 16 阅读

相关 vue常用指令

声明一：这里列出的只是一些常用的指令，更多指令、更多细节可参考[vue中文官网][vue]。声明二：本文主要学习并整理自51CTO课程`《Vue.js 2.0之全家桶

Bertha 。/ 2023年05月30日 13:58/ 0 赞/ 11 阅读

相关 vue3打包页面不显示问题

打包静态资源查看不了解决第一步：router文件夹下的index.js里注释或修改路由方式![在这里插入图片描述][20200630125725271.png_pic_c

以你之姓@/ 2023年02月21日 11:49/ 0 赞/ 24 阅读

相关 vue通过自定义指令控制不同角色页面显示什么按钮

main.js中引入import ‘./plugins/button-check.js’ button-check.js’ import Vue from "vue

快来打我*/ 2022年11月12日 01:47/ 0 赞/ 291 阅读

相关 VUE_vue脚手架开发启动自动打开页面

根目录 vue.config.js 文件，没有则新建 module.exports = { devServer: { open: true

柔情只为你懂/ 2022年09月16日 04:45/ 0 赞/ 145 阅读

相关 vue打开新页面

原文地址：[https://segmentfault.com/q/1010000010116819][https_segmentfault.com_q_101000001011

古城微笑少年丶/ 2022年06月07日 11:27/ 0 赞/ 292 阅读

相关打开页面直接显示内容

第一种最为简单的方式window.οnlοad= function()\{\}，方法中直接获取数据，具体的可以看我的另外一篇博客[https://mp.csdn.net/

不念不忘少年蓝@/ 2022年03月21日 16:16/ 0 赞/ 330 阅读

相关 Vue 常用指令

[目录][Link 1] -------------------- 1. 前言在[Vue 模板语法][Vue] 篇中，我介绍了vue的模板语法，但是我觉

缺乏、安全感/ 2022年02月23日 05:54/ 0 赞/ 323 阅读

相关使用axios请求数据，并用vue指令v-for页面显示

> 使用axios进行，请求data.json中的数据，再通过vue中的v-for指令将获取的数据进行页面显示数据源data.json { "s

野性酷女/ 2021年09月25日 07:18/ 0 赞/ 429 阅读

相关 vue指令用法

vue指令指令式带有 `v-` 前缀的特殊特性`v-text`和`v-html`都属于指令将数据和dom做关联，当表达式的值改变时，响应式地作用在视图解决大胡子语法闪烁

桃扇骨/ 2021年07月25日 02:03/ 0 赞/ 518 阅读