Nuxt.js怎么设置全局过滤器
时间: 2023-11-27 19:06:07 浏览: 95
在Nuxt.js中设置全局过滤器的步骤如下:
1. 在`plugins`目录下新建一个`filters.js`文件。
2. 在`filters.js`文件中定义一个全局过滤器,如下所示:
```javascript
import Vue from 'vue'
Vue.filter('capitalize', function(value) {
if (!value) return ''
value = value.toString()
return value.charAt(0).toUpperCase() + value.slice(1)
})
```
以上代码定义了一个名为`capitalize`的过滤器,它将传入的字符串的首字母大写。
3. 在`nuxt.config.js`文件中引入`filters.js`文件。
```javascript
export default {
// ...
plugins: [
{ src: '~/plugins/filters.js' }
]
}
```
现在,`capitalize`过滤器就可以在全局的任何Vue组件中使用了,例如:
```html
<template>
<div>{{ message | capitalize }}</div>
</template>
<script>
export default {
data() {
return {
message: 'hello world'
}
}
}
</script>
```
以上代码将会把`message`的值转换为`Hello world`并显示在页面上。
阅读全文