Vue的插值表达式

#Vue的插值表达式{{}} 主要作用是进行数据绑定，最常见的形式是使用“Mustache”语法（双大括号）的文本插值。例如：&lt;span&gt;Message:{{msg}}&lt;/span&gt;Mustache标签将会被替代为对应数据对象上msg属性（msg定义在data对象中）的值。无论何时，绑定的数据对象上msg属性

张侦毅

12337人浏览 · 2018-10-25 21:26:20

张侦毅 · 2018-10-25 21:26:20 发布

Vue的插值表达式`{{}}`

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

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

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

源码示例

源码

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Vue</title>
</head>
<body>
    <div id="app">
        {{hello + ' World !'}}<br>
        {{hello == 'Hello' ? 'yes' : 'no'}}<br>
        {{ hello.split('ll').reverse().join('aa') }}<br>
        {{ judge(hello) }}
    </div>
</body>
<!--1、导入Vue的js文件 -->
<script src="../../../js/vue/vue/1.0/vue.js"></script>
<script type="application/javascript">
    //2、实例化Vue对象，其中vm:叫做MVVM中的View Model
    var vm = new Vue({
        el:'#app'     //表示当前Vue对象接管app的div区域
        ,data:{
            hello:'Hello'     //相当于MVVM中的Model这个角色
            ,kw:''
        }
        ,methods:{
            judge(str){
                //判断Hello是否与World相等，如果相等，返回true，如果不相等，返回false。
                return str == 'World' ? true : false ;
            }
        }
    });
</script>
</html>

运行结果：

在这里插入图片描述

分析：

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

第一个{{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。