小编给大家分享一下vue双花括号怎么用,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!
网站建设哪家好,找成都创新互联公司!专注于网页设计、网站建设、微信开发、重庆小程序开发、集团企业网站建设等服务项目。为回馈新老客户创新互联还提供了黎城免费建站欢迎大家使用!
具体内容如下
<!doctype html> <html> <head> <meta charset="UTF-8"> <title>{{}}的使用</title> <script src="js/vue.js"></script> </head> <body> <div id="container"> <h2>{{msg}}</h2> <h5>{{cart.brand}}</h5> <!--在双花括号中 执行运算表达式 --> <p> 3 + 5 = {{ 3 + 5 }}</p> </div> <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> <div> 双花括号:执行表达式,将表达式的结果 输出到当前调用的元素的innerHTML中 </div> <div id="container">{{msg}} <h5>三目运算3>5:{{3>5?"对":"错"}}</h5> <h5>逻辑运算3>5 && 2>1:{{3>5 && 2>1}}</h5> <h5>{{!hasMore}}</h5> <h5>{{totalNum>count?"大于":"小于"}}</h5> </div> <script> new Vue({ el:"#container", data:{ msg:"Hello VueJs", count:3, totalNum:10, hasMore:true } }) </script> </body> </html>
以上是“vue双花括号怎么用”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注创新互联行业资讯频道!
当前标题:vue双花括号怎么用
新闻来源:https://www.cdcxhl.com/article34/jcgjse.html
成都网站建设公司_创新互联,为您提供App开发、、网站建设、做网站、网站维护、网站导航
声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 创新互联