Vue---插值表达式{{}}、v-text、v-html用法

1、v-cloak: 标签属性能够解决插值表达式闪烁的问题,在style标签内设置[v-cloak]{display:none;}

{{msg}}

2、插值表达式{{ 值 }}:在html标签中使用插值表达式{{ 值 }},通过此方式可将data中的属性值以文本的形式显示在前端,插值表达式的前后都可以插入文本或者其他内容,在网页渲染时不会被覆盖,类似于占位符,同时它还有闪烁的问题需要配合v-cloak属性解决。

 

我会在前端显示{{msg}}我会在前端显示

3、v-text=" data中的属性":v-text的作用和插值表达式的作用相似,都是用来显示data中的属性值,但是v-text与{{ 值 }} 不同的是,v-text会将之前在html标签中定义的文本覆盖掉。同时,v-text没有闪烁的问题。

在前端渲染成功后我会消失

4、v-html:将data中的以html方式定义的文本,以html的方式显示在前端中,而不会显示html标签,v-html属性也会覆盖原先在html标签中定义的文本,v-html没有闪烁的问题。

msg: '

世上无难事只怕有心人

'

你可能感兴趣的:(Vue)