数据绑定.md

数据绑定

文本

使用{{内容}}来绑定文本数据，你也可以在属性中使用它

<span>Message: {{ msg }}</span>

在文本中你还可以使用过滤器来处理数据，这个功能会比较常用，你可以把过滤器当做express中的模板函数。

{{ message | capitalize }}

过滤器可以在初始化的时候声明

new Vue({
  // ...
  filters: {
    capitalize: function (value) {
      if (!value) return ''
      value = value.toString()
      return value.charAt(0).toUpperCase() + value.slice(1)
    }
  }
})

也可以通过filter方法声明，建议使用这种方法，这样可以把过滤器集成到一个模块内。

// register
Vue.filter('my-filter', function (value) {
  // return processed value
})
// getter, return the filter if registered
var myFilter = Vue.filter('my-filter')

• 你可以在官方文档查看更详细的过滤器内容。

属性

我们可以使用v-bind:或简写:来向属性绑定数据（在组件中也会用到），如下：

<!-- full syntax -->
<a v-bind:href="url"></a>
<!-- shorthand -->
<a :href="url"></a>

事件

我们可以使用v-on:或简写@来绑定事件函数，如下：

<!-- full syntax -->
<a v-on:click="doSomething"></a>
<!-- shorthand -->
<a @click="doSomething"></a>

• 你可以在官方文档查看更详细内容。