文本插值

数据绑定最常见的形式就是文本插值。

在HTML标签体中，使用两个花括号{{ }}将JS表达式引起来。文本插值含义是将JS表达式的结果作为文本显示到页面中；并不是指JS表达式的结果为文本。

插值表达式的语法如下：

1{{expression}}

其中，expression将作为JS表达式去解析并执行。示例如下：

 1<div id="app">
 2  <h1>Hello, {{name}}<!-- 插值表达式 -->!</h1>
 3</div>
 4
 5<script type="text/javascript">
 6  new Vue({
 7    el: '#app',
 8    data: {
 9      name: 'Vue.js'
10    }
11  })
12</script>

因为文本插值使用的是JS表达式，所以在{{ }}中，也可以写入1+1这类常量表达式，也可以调用方法（例如name.toUpperCase()），还可以使用size+1等表达式。

实际上，插值表达式中可以使用的对象不仅仅是data中的对象，所有Vue实例中的属性、原型中属性的它都能使用。因为data中的对象在Vue实例化后，是作为Vue实例的属性所存在。

过滤器

Vue允许自定义过滤器，被用作一些常见的文本格式化。过滤器由“管道符”|指示，并且过滤器可以串联，其格式如下：

1<!-- 元素插值中 -->
2{{ expression | filter1[ | filter2[ | ... ]] }}
3
4<!-- v-bind 指令中 -->
5v-bind:attribute="expression | filter1[ | filter2[ | ... ]]"

使用过滤器时，|左边表达式的值（或输出）将会作为|右边过滤器的（第1个参数的）输入。

过滤器一般是在Vue实例配置中的filters中以函数的形式定义。例如：

 1<div id="app">
 2  <h1>{{ message | capitalize }}</h1>
 3</div>
 4<script type="text/javascript">
 5  new Vue({
 6    el: "#app",
 7    data: {
 8      message: 'hello vue.js!'
 9    },
10    filters: {
11      capitalize(value) {
12        if(!value) return ''
13        value = value.toString()
14        return value.charAt(0).toUpperCase() + value.slice(1)
15      },
16    },
17  });
18</script>

如果过滤器的定义中，拥有两个或两个以上的参数，那么在使用过滤器时，|左边的表达式的值将会作为其右边过滤器的第1个参数进行输入，例如：

1{{ message | filter(arg1, arg2) }}

arg1作为filter()的第2个参数输入，arg2作为filter()的第3个参数输入，而message将作为filter()的第1个参数进行输入。

注：

  1. 过滤器在定义时，一定至少要定义有一个参数value，因为过滤器始终会将管道符|左边的表达式的结果作为参数1value传入。如果不定义参数value，那么过滤器将显得无意义。
  2. 过滤器不能在v-model指令中使用。
  3. 一般的过滤器不会改变原本的数据。

在Vue实例中配置的filters只能在当前Vue实例中使用，这种过滤器被称为局部过滤器。当应用中存在多个Vue实例时，可以使用全局过滤器。全局过滤器使用Vue.filter()来注册。例如：

1Vue.filter('capitalize', function (value) {
2  if(!value) return ''
3    value = value.toString()
4    return value.charAt(0).toUpperCase() + value.slice(1)
5})

Vue.filter()有两个参数，它们的作用分别是：

  1. 参数1：定义过滤器的名称。
  2. 参数2：定义过滤器的方法。