zoukankan      html  css  js  c++  java
  • vue双花括号的使用

    <!doctype html>
    <html>
     <head>
      <meta charset="UTF-8">
      <title>{{}}的使用</title>
        <script src="js/vue.js"></script>
     </head>
     <body>
      <div id="container">
            <h1>{{msg}}</h1>
            <h4>{{cart.brand}}</h4>
        <!--在双花括号中  执行运算表达式  -->
        <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}}
            <h4>三目运算3>5:{{3>5?"对":"错"}}</h4>
            <h4>逻辑运算3>5 && 2>1:{{3>5 && 2>1}}</h4>
            <h4>{{!hasMore}}</h4>
            <h4>{{totalNum>count?"大于":"小于"}}</h4>
        </div>
        <script>
            new Vue({
                el:"#container",
                data:{
                    msg:"Hello VueJs",
                    count:3,
                    totalNum:10,
                    hasMore:true
                }
            })
        </script>
     </body>
    </html>
  • 相关阅读:
    常见的线性结构
    Lambda表达式学习笔记
    Spring Security 入门 (二)
    Spring Security 入门(一)
    Eclipse 创建 Maven 项目
    初学 Spring MVC(基于 Spring in Action)
    蓝桥杯之入学考试
    Java 学习总结
    二叉搜索树和红黑树
    Detours 劫持
  • 原文地址:https://www.cnblogs.com/wangruifang/p/7765139.html
Copyright © 2011-2022 走看看