Vue的插值表达式

Vue的插值表达式{{}}

  主要作用是进行数据绑定，最常见的形式是使用“Mustache”语法（双大括号）的文本插值。例如：Message:{{msg}}Mustache标签将会被替代为对应数据对象上msg属性（msg定义在data对象中）的值。无论何时，绑定的数据对象上msg属性发生了改变，插值处的内容都会更新。

{{}}对JavaScript表达式支持，例如：

    {{number + 1}}
    {{ok ? 'yes' : 'no'}}
    {{message.split('').reverse().join('')}}

源码示例

源码

    
    


    

        {{hello + ' World !'}}

        {{hello == 'Hello' ? 'yes' : 'no'}}

        {{ hello.split('ll').reverse().join('aa') }}

        {{ judge(hello) }}
    

运行结果：

分析：

  上面的代码中一共有四个方法。

  第一个{{hello + ' World !'}}实际上是字符串拼接，由于hello 参数的值是Hello，故拼接的结果是Hello World !。

  第二个{{hello == 'Hello' ? 'yes' : 'no'}}是判断，hello 的值为Hello，则返回yes，否则返回no。由于hello 的值确实为Hello，故返回的值为yes。

  第三个{{ hello.split('ll').reverse().join('aa') }}其实是先执行split()方法，将Hello以字符串ll来进行分割，分割成he和o两个字符串，然后再执行reverse()完成串数组的颠倒操作，变成o和he，最后执行join()来插入aa字符串，故最终的结果为：oaaHe。

  第四个{{ judge() }}其实是调用了vm中的methods方法域中的judge()函数，通过传入hello参数，该参数的值为Hello，然后再将其与World字符串相比较，如果相同，则返回true，否则则返回false。由于Hello与World并不相同，故返回的值为false。