微客导航 » 文章资讯 » 解决使用Vue.js显示数据的时,页面闪现原始代码的问题

解决使用Vue.js显示数据的时,页面闪现原始代码的问题

2023-09-16 11:41:04 144

今天开始学习Vue.js的使用，但是在学习过程中发现一个问题，那就是页面加载数据时，原始代码会闪现一下。查访各方资料，终的解决方法。

第一步、加入一段css代码


[v-cloak]{
display:none;
}

第二步、在view上引用css模块


{{message}}
{{name}}

注意，有的文章说，在具体数据部分加入v-cloak，但是这样太麻烦，每一个数据显示都要加，所以直接加载view大模块上，就能解决问题了。

第三步、js部分没有变化


varexeData={
message:"HelloWorld",
name:"我是Vue"
};

newVue({
el:"#app",
data:exeData
})

下面贴上完整代码：





Vue.jsDemo

[v-cloak]{
display:none;
}





{{message}}
{{name}}

//模型数据Model varexeData={ message:"HelloWorld", name:"我是Vue" }; //View实例，也就是View-Model(VM) newVue({ el:"#app", data:exeData })

以上这篇解决使用Vue.js显示数据的时,页面闪现原始代码的问题就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持毛票票。

{{message}}