<!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-cloak>
{{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
最新推荐文章于 2024-06-27 22:42:30 发布