作者：幸福guaiguai乐园 | 来源：互联网 | 2023-08-15 21:46
v-cloak : 使用它防止闪现表达式, 与css配合: [v-cloak] { display: none }
前端开发时&＃xff0c;经常遇到自己在页面写的表达式数据渲染慢&＃xff0c;会直接显示表达式的问题&＃xff0c;这样给用户的体验不好&＃xff0c;如下图&＃xff1a;
这种情况&＃xff0c;使用 vue 的内置指令 v-cloak 来处理即可。此指令需要与 css 配合使用&＃xff0c;如下&＃xff1a;
<html lang&＃61;"en">
<head><meta charset&＃61;"UTF-8"><title>防止指令闪现title><style>[v-cloak] { display: none }style>
head>
<body>
<div id&＃61;"example"><p v-cloak>{{content}}p>
div><script type&＃61;"text/Javascript" src&＃61;"https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>
<script type&＃61;"text/Javascript">alert(123);new Vue({el: &＃39;#example&＃39;,data: {content: &＃39;Hello World!&＃39;}})
script>
body>
html>
京公网安备 11010802041100号