<!doctype html> <html> <head> <meta charset="utf-8"> <title>{{}}的使用</title> <script src="js/vue.js"></script> </head> <body> <p id="container"> <h1>{{msg}}</h1> <h4>{{cart.brand}}</h4> <!--在双花括号中 执行运算表达式 --> <p> 3 + 5 = {{ 3 + 5 }}</p> </p> <script> new vue({ el:#container, data:{ msg:hello vuejs, cart:{ brand:volvo,price:30 } } }) </script> </body> </html>
代码：
<!doctype html> <html> <head> <meta charset="utf-8"> <title>双花括号的练习</title> <script src="js/vue.js"></script> </head> <body> <p> 双花括号:执行表达式,将表达式的结果 输出到当前调用的元素的innerhtml中 </p> <p id="container">{{msg}} <h4>三目运算3>5:{{3>5?对:错}}</h4> <h4>逻辑运算3>5 && 2>1:{{3>5 && 2>1}}</h4> <h4>{{!hasmore}}</h4> <h4>{{totalnum>count?大于:小于}}</h4> </p> <script> new vue({ el:#container, data:{ msg:hello vuejs, count:3, totalnum:10, hasmore:true } }) </script> </body> </html>
相信看了本文案例你已经掌握了方法，更多精彩请关注其它相关文章！
推荐阅读：
vue中spa单页面应用程序详解
vue-router组件间参数相互传递的方法
以上就是vue的花括号怎么使用的详细内容。