<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Vue内置指令</title>
</head>
<body>
<h1>基本指令 v-cloak</h1>
v-cloak不需要表达式，它会在Vue实例结束编译时从绑定的HTML元素上移除，经常和CSS的display:none配合使用。
<div id="app1" v-clock>
{{message}}
</div>
这时虽然加了指令v-cloak,但其实并没有起到任何作用，当网速较慢、Vue.js文件还没有加载完时，在页面上会显示<span v-pre>{{message}}</span>
的字样，直到Vue创建实例、编译模板时，DOM才会被替换，只要加一句CSS就可以解决问题。
<pre>
[v-cloak]{
display:none;
}
</pre>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src=" href='https://cdn.jsdelivr.net/npm/vue/dist/vue.js">https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app1 = new Vue({
el:'#app1',
data:{
message:'Vue 基本指令 v-cloak 测试隐藏文本'
}
})
[v-cloak]{
display:none;
}
</script>
</body>
</html>
Vue基本指令之v-cloak
猜你喜欢
转载自blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/82718352
今日推荐
周排行