vue 过滤器的使用 在vue cli中
时间: 2023-10-11 14:04:29 浏览: 50
可以通过在过滤器目录中创建一个.js文件并在Vue组件中引入来使用过滤器,如下所示:
1. 在项目中创建一个名为“filters”的文件夹。
2. 在该文件夹中创建.js文件并定义要使用的过滤器。
例如,我们创建一个名为“capitalize.js”的文件,并在其中定义一个名为“capitalize”的过滤器,该过滤器可将输入字符串的首字母转换为大写:
```
export default function capitalize(value) {
if (!value) return ''
value = value.toString()
return value.charAt(0).toUpperCase() + value.slice(1)
}
```
3. 在Vue组件中,使用Vue.filter()方法注册过滤器并将其应用于要格式化的数据。
例如,我们有一个名为“example.vue”的组件,其中包含一个名为“username”的属性,我们想将其格式化为首字母大写。可以使用以下代码:
```
<template>
<div>
<p>{{ username | capitalize }}</p>
</div>
</template>
<script>
import capitalize from '@/filters/capitalize.js'
export default {
data() {
return {
username: 'john'
}
},
filters: {
capitalize
}
}
</script>
```
在上述代码中,我们通过从“capitalize.js”文件中导入“capitalize”过滤器,将其注册到Vue组件中的“filters”对象中。然后,在模板中使用“username | capitalize”语法将过滤器应用于“username”属性,以呈现格式化的输出。