版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/ZZY1078689276/article/details/83416284
v-text
v-text
可以将一个变量的值渲染到指定的元素中。
用法:
<span v-text="hello"></span>
var vm = new Vue({
el:'#app'
,data:{
hello:'<h1>Hello World !</h1>'
}
});
结果:
从上面我们可以看出,h1标签只能以字符串形式输出,也就是说v-text
只能将数据以字符串的形式在HTML页面中进行输出。
v-html
{{}}
和v-text
会将数据解释为纯文本,而非HTML,为了输出真正的HTML,你需要使用v-html
用法:
<div v-html="hello"></div>
var vm = new Vue({
el:'#app'
,data:{
hello:'<h1>Hello World !</h1>'
}
});
结果:
从上面我们可以看出,被h1包裹的文字明显被加粗放大了,这说明被v-html
能将数据以HTML的形式在页面中进行输出。
v-cloak
v-cloak
指令保持在元素上直到关联实例结束编译后自动移除,v-cloak
和CSS规则如[v-cloak]{display: none;}
一起用时,这个指令可以隐藏未编译的Mustache标签直到实例准备完毕。通常用来防止{{}}
表达式闪烁问题。
用法
<style>
[v-cloak]{
display: none;
}
</style>
<span v-cloak>{{hello}}</span><br>
var vm = new Vue({
el:'#app'
,data:{
hello:'<h1>Hello World !</h1>'
}
});
结果:
这个的展示效果看上去与v-text
的效果一样,其实是有区别的,那就是当页面加载缓慢时,被v-cloak
包裹的信息是不会输出的,除非页面加载完毕,这样的好处是,当页面内容较多或者页面本身由于网速差而加载缓慢时,页面中的信息不会出现由{{hello}}
到<h1>Hello World !</h1>
的抖动。
完整代码
<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Vue</title>
<style>
[v-cloak]{
display: none;
}
</style>
</head>
<body>
<div id="app">
<span v-text="hello"></span><br>
<span v-cloak>{{hello}}</span><br>
<div v-html="hello"></div>
</div>
</body>
<!--1、导入Vue的js文件 -->
<script src="../../../js/vue/vue/1.0/vue.js"></script>
<script type="application/javascript">
var vm = new Vue({
el:'#app'
,data:{
hello:'<h1>Hello World !</h1>'
}
});
</script>
</html>