2023年7月18日发(作者：)
vue花括号⾥⾯的变量_vue学习记录1插值操作Mustache语法 mustache是胡须的意思，因为{{}}像胡须，⼜叫⼤括号语法。 在vue对象挂载的dom元素中，{{}}不仅可以直接写变量，还可以写简单表达式。
Mustache的语法
{{message}}
{{message}},啧啧啧
{{firstName + lastName}}
{{firstName + " " + lastName}}
{{firstName}}{{lastName}}
{{count * 2}}
v-once v-once表⽰该dom元素只渲染⼀次，之后数据改变，不会再次渲染。
{{message}}
{{message}}
上述{{message}}的message修改后，第⼀个h2标签数据会⾃动改变，第⼆个h2不会。v-html 在某些时候我们不希望直接输出
百度⼀下这样的字符串，⽽输出被html⾃⼰转化的超链接。此时可以使⽤v-html。
v-html指令的使⽤
不使⽤v-html
{{url}}
使⽤v-html，直接插⼊html
v-text v-text会覆盖dom元素中的数据，相当于js的innerHTML⽅法。
v-text指令的使⽤
不使⽤v-text
{{message}}，啧啧啧
使⽤v-text，以⽂本形式显⽰,会覆盖
，啧啧啧
v-pre 有时候我们期望直接输出{{message}}这样的字符串，⽽不是被{{}}语法转化的message的变量值，此时我们可以使⽤v-pre标签。
v-pre指令的使⽤
不使⽤v-pre
{{message}}
使⽤v-pre,不会解析
{{message}}
v-cloak 有时候因为加载延时问题，例如卡掉了，数据没有及时刷新，就造成了页⾯显⽰从{{message}}到message变量“你好啊”的变化，这样闪动的变化，会造成⽤户体验不好。此时需要使⽤到v-cloak的这个标签。在vue解析之前，div属性中有v-cloak这个标签，在vue解析完成之后，v-cloak标签被移除。简单，类似div开始有⼀个css属性display:none;，加载完成之后，css属性变成display:block，元素显⽰出来。
v-cloak指令的使⽤
{{message}}
发布者：admin，转转请注明出处：http://www.yc00.com/web/1689628536a272007.html
评论列表（0条）