这次给大家带来vue的花括号怎么使用，vue花括号使用的注意事项有哪些，下面就是实战案例，一起来看一下。

       
  
{{msg}}
  
{{cart.brand}}
  
 3 + 5 = {{ 3 + 5 }}
    new Vue({   el:"#container",   data:{    msg:"Hello VueJs",    cart:{     brand:"Volvo",price:30    }   }  })  

登录后复制

代码：

       
 双花括号:执行表达式,将表达式的结果 输出到当前调用的元素的innerHTML中 
 
{{msg}}  
三目运算3>5:{{3>5?"对":"错"}}
  
逻辑运算3>5 && 2>1:{{3>5 && 2>1}}
  
{{!hasMore}}
  
{{totalNum>count?"大于":"小于"}}
    new Vue({   el:"#container",   data:{    msg:"Hello VueJs",    count:3,    totalNum:10,    hasMore:true   }  })  

登录后复制

相信看了本文案例你已经掌握了方法，更多精彩请关注【创想鸟】其它相关文章！

推荐阅读：

vue中SPA单页面应用程序详解

立即学习“前端免费学习笔记（深入）”；

vue-router组件间参数相互传递的方法

以上就是vue的花括号怎么使用的详细内容，更多请关注【创想鸟】其它相关文章！