vue.js（2）--v-cloak v-text v-html
程序员文章站
2022-04-29 20:57:08
v-cloak v-text v-html的使用 （1）实例 （2）v-cloak v-text v-html和插值表达式的区别与特点 使用插值表达式会有闪烁问题 设置v-cloak类中的display为none来解决闪烁问题 使用插值表达式可以在前后添加内容，v-text会覆盖标签内容 使用v-t ......
v-cloak v-text v-html的使用
（1）实例
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>vue-cloak.v-text.v-html</title>
<script src="../lib/vue.js"></script> <!--导入vue.js -->
<style>
[v-cloak]{
display: none;
}/*设置v-cloak类中的display为none来解决插值表达式的闪烁问题*/
</style>
</head>
<body>
<div class="app">
<h1 v-cloak>++++{{ msg }}-------</h1>
<!-- 使用插值表达式会有闪烁问题 -->
<!-- 使用插值表达式可以在前后添加内容，而v-text会覆盖标签内的内容 -->
<h4 v-text="msg"></h4>
<!-- 使用v-text没有闪烁问题 -->
<p v-html="msg2"></p>
<!-- 使用v-html可以将msg2内容当做html进行输入，同时也会覆盖标签内容 -->
</div>
<script>
var vm = new vue({
el:'.app',
data:{
msg:'努力学习vue',
msg2:'<h2>hello world</h2>'
}
})
</script>
</body>
</html>
（2）v-cloak v-text v-html和插值表达式的区别与特点
使用插值表达式会有闪烁问题
设置v-cloak类中的display为none来解决闪烁问题
使用插值表达式可以在前后添加内容，v-text会覆盖标签内容
使用v-text没有闪烁问题
使用v-html来添加带有html标签的内容，同时也会覆盖原标签的内容