本文共 922 字，大约阅读时间需要 3 分钟。

9、过滤器

例1：局部过滤器

data: {    userList: [        {id: 1, name: 'peter', gender: 1},        {id: 2, name: 'helen', gender: 0}    ]}

使用if指令判断

   
        
     
              
{
  {item.id}}
              
{
  {item.name}}
                            
            男            女        
         
    
   

使用过滤器

// filters 定义局部过滤器，只可以在当前vue实例中使用filters: {    genderFilter(gender) {        return gender === 1 ? '男' : '女'    }}     
       {
  {item.gender | genderFilter}}

例2：全局过滤器

// 在创建 Vue 实例之前全局定义过滤器：Vue.filter('capitalize', function (value) {    return value.charAt(0).toUpperCase() + value.slice(1)})

应用全局过滤器

{
  {item.name | capitalize}}

定义另一个vue实例

var app2 = new Vue({    el: '#app2',    data: {        user: { id: 3, name: 'annie', gender: 0 }    }})

   
    
        {
  {user.name | capitalize}}    
        {
  {user.gender | genderFilter}}
   

过滤器常用来处理文本格式化的操作。过滤器可以用在两个地方：双花括号插值和 v-bind 表达式

转载地址：http://pyzki.baihongyu.com/