2023年7月18日发(作者：)
vue中页⾯信息的展⽰v-text v-text可以将⼀个变量的值渲染到指定的元素中。 ⽤法：var vm = new Vue({ el:'#app'
,data:{ hello:'
Hello World !
'} }); 结果： 从上⾯我们可以看出，h1标签只能以字符串形式输出，也就是说v-text只能将数据以字符串的形式在HTML页⾯中进⾏输出。v-html {{}}和v-text会将数据解释为纯⽂本，⽽⾮HTML，为了输出真正的HTML，你需要使⽤v-html ⽤法：
var vm = new Vue({ el:'#app' ,data:{ hello:'Hello World !
' } }); 结果： 从上⾯我们可以看出，被h1包裹的⽂字明显被加粗放⼤了，这说明被v-html能将数据以HTML的形式在页⾯中进⾏输出。v-cloak v-cloak指令保持在元素上直到关联实例结束编译后⾃动移除，v-cloak和CSS规则如[v-cloak]{display: none;}⼀起⽤时，这个指令可以隐藏未编译的Mustache标签直到实例准备完毕。通常⽤来防⽌{{}}表达式闪烁问题。 ⽤法{{hello}}var vm = new Vue({ el:'#app' ,data:{ hello:'
Hello World !
' } }); 结果： 这个的展⽰效果看上去与v-text的效果⼀样，其实是有区别的，那就是当页⾯加载缓慢时，被v-cloak包裹的信息是不会输出的，除⾮页⾯加载完毕，这样的好处是，当页⾯内容较多或者页⾯本⾝由于⽹速差⽽加载缓慢时，页⾯中的信息不会出现由{{hello}}到Hello World !
的抖动。完整代码{{hello}}
发布者：admin，转转请注明出处：http://www.yc00.com/web/1689627082a271906.html
评论列表（0条）