vue双花括号怎么用

发布时间:2021-07-27 14:26:36 作者:小新
来源:亿速云 阅读:258

小编给大家分享一下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双花括号怎么用”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注亿速云行业资讯频道!

推荐阅读:
  1. 花括号操作符重载
  2. vue中花括号数据绑定失败如何解决

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

vue

上一篇:Eclipse下Javassist怎么用

下一篇:java之StringBuffer怎么用

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》