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>

 

转载于:https://www.cnblogs.com/wangruifang/p/7765139.html

你可能感兴趣的:(vue双花括号的使用)