Vue 切片词

在 Vue 中，有时候我们需要对数据进行切片处理，只取一部分数据。这时候，我们可以使用 Vue 的切片词指令，通过表达式来限制要渲染出来的数据。

语法

{{expression | filter1 | filter2 ···}}

或者

v-bind="expression | filter1 | filter2 ···"

其中 expression 是要被处理的表达式，| 是管道符号，后面跟着各种过滤器。

举个例子

<template>
  <div>
    <ul>
      <li v-for="item in banana | slice(1, 3)">
        {{ item }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data () {
    return {
      banana: ['香蕉', '苹果', '西瓜', '橘子', '芒果']
    }
  }
}
</script>

在这个例子中，我们使用了 Vue 的 v-for 指令，遍历了 banana 数组。在遍历的过程中，我们还使用了 slice 过滤器，选择了在数组中从索引 1 开始，到索引 3 结束的数据，渲染出来。

内置过滤器

Vue 提供了一些内置的过滤器，可以直接使用。

slice

语法：{{ value | slice(start, end) }}

作用：截取数组或字符串的一部分。start 和 end 是截取的起始和结束位置。如果不传 end，则默认截取到最后。

lowercase

语法：{{ value | lowercase }}

作用：将字符串全部转成小写。

uppercase

语法：{{ value | uppercase }}

作用：将字符串全部转成大写。

capitalize

语法：{{ value | capitalize }}

作用：将字符串的第一个字母转成大写。

currency

语法：{{ value | currency(symbol, decimals) }}

作用：将数字转换成货币格式。symbol 是货币符号，默认为 $。decimals 是保留小数位数，默认为 2。

自定义过滤器

除了内置过滤器，我们还可以自定义过滤器。自定义过滤器需要全局定义或局部定义。

全局过滤器

全局过滤器定义在 Vue.options.filters 中。

Vue.filter('reverse', function (value) {
  return value.split('').reverse().join('')
})

定义好之后，就可以在任何 Vue 实例中使用这个过滤器了。

{{ message | reverse }}

局部过滤器

局部过滤器只在当前组件中可使用，它的定义在组件的选项中。

<template>
  <div>
    {{ message | reverse }}
  </div>
</template>

<script>
export default {
  data () {
    return {
      message: 'hello'
    }
  },
  filters: {
    reverse: function (value) {
      return value.split('').reverse().join('')
    }
  }
}
</script>

总结

• Vue 的切片词指令可以用来对数据进行切片处理。
• 内置过滤器包括 slice、lowercase、uppercase、capitalize、currency。
• 我们也可以自定义过滤器，全局过滤器定义在 Vue.options.filters 中，局部过滤器定义在组件的选项中。