Vue系列之插值操作Mustache


一、Mustache

数据绑定最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值。

二、语法

不仅仅可以直接写变量,也可以写简单的表达式。

三、示例

1、变量

<h2>{
   
   { message }}</h2>
<h2>{
   
   { firstName }} {
   
   { lastName }}</h2>

2、使用 JavaScript 表达式

<h2>{
   
   { counter * 4 }}</h2>
<h2>{
   
   { ok ? "南生" : "FELaoL" }}</h2>
<h2>{
   
   { message.split("").reverse().join("") }}</h2>

上面的这些表达式会在所属Vue实例的数据作用域下作为JavaScript被解析。

注意:每个绑定都只能包含单个表达式。即下方的这段代码是无法执行的。

<!-- 这是语句,不是表达式 -->
<h2>{
   
   {var a = 1}}</h2>
<!-- 流控制也不会生效,请使用三元表达式 -->
<h2>{
   
   { if(ok) { return message } }}</h2>

写在最后

如果你感觉文章不咋地//(ㄒoㄒ)//,就在评论处留言,作者继续改进;o_O???
如果你觉得该文章有一点点用处,可以给作者点个赞;\\*^o^*//
如果你想要和作者一起进步,可以微信扫描二维码,关注前端老L~~~///(^v^)\\\~~~
谢谢各位读者们啦(^_^)∠※!!!

猜你喜欢

转载自blog.csdn.net/weixin_62277266/article/details/131178258
今日推荐