文本插值

文本插值和表达式

使用双大括号（ Mustache 语法）“｛｛｝｝”是最基本的文本插值方法，它会自动将我们双向绑定的数据实时显示出来。

  <div id="app"> {{ msg }} </div>
  
  <script>
      var app = new Vue({
    el: "#app",
    data: {
      msg: '你好呀~'
    }
  });
  </script>

image.png

在｛｛｝｝中，除了简单的绑定属性值外，还可以使用 JavaScript 表达式进行简单的运算 、 三元运算等。

  <div id="app">
    {{ msg }}
    <br> {{ 6*6 + 6}}
    <br> {{ 0>1? 'why' : msg }}
  </div>

  <script>
    var app = new Vue({
      el: "#app",
      data: {
        msg: '你好呀~'
      }
    });
  </script>

简单的运算 、 三元运算等.png

Vue .js 只支持单个表达式，不支持语句和流控制。

{{ if(1>0){} }}

直接报错了：

image.png

注意：{{var a = 6}} 也是多行表达式---- var a ;a = 6;