在Vue 2中，你可以使用 filters 選項(xiàng)來定義過濾器。以下在組件中定義和使用過濾器的簡(jiǎn)單例子：
1、app.vue 使用methods實(shí)現(xiàn)：
<template>
<div>
{{ uppercase(message) }}
<h3>
<h3 :x="mySlice(msg)">Title</h3>
</h3>
</div>
</template>
<script>
export default {
data() {
return {
message: "Hello World",
time: 1621561377603,
msg: "你好啊，CSDN?。?！",
};
},
methods:{
mySlice(value) {
return value.slice(0, 7);
},
uppercase(value) {
return value.toUpperCase();
}
}
};
</script>
2、使用filters配合computed計(jì)算屬性實(shí)現(xiàn)：
<template>
<div>
{{ filteredMessage }}
</div>
</template>
<script>
export default {
data() {
return {
message: 'Hello World'
};
},
computed: {
filteredMessage() {
return this.$options.filters['myfilter'](this.message);
}
},
filters: {
myfilter(value) {
return value.slice(0, 4);
}
}
};
</script>
3、引入其他組件FilterFix.vue實(shí)現(xiàn)：
app.vue
<template>
<div>
{{ nself }}
<FilterFix/>
</div>
</template>
<script>
import FilterFix from './components/FilterFix.vue'
export default {
name: 'App',
data() {
return {
message: "Hello World!!!",
};
},
components: {
FilterFix,
},
computed: {
nself() {
return this.$options.filters['myfilter'](this.message);
},
},
filters: {
myfilter(value) {
return value.slice(0, 7);
},
},
};
</script>
FilterFix.vue文章來源：http://www.zghlxwxcb.cn/news/detail-485609.html
<template>
<div>
{{ $options.filters.myfilter(message) }}
</div>
</template>
<script>
export default {
name: "filter-fix",
data() {
return {
message: "Hello World!!!",
};
},
filters: {
myfilter(value) {
return value.slice(0, 9);
},
},
};
</script>
main.js文章來源地址http://www.zghlxwxcb.cn/news/detail-485609.html
import Vue from 'vue'
import App from './App.vue'
new Vue({
render: h => h(App)
}).$mount('#app')
到了這里，關(guān)于Vue過濾器基本使用的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
![[Java]過濾器（Filter）](https://imgs.yssmx.com/Uploads/2024/02/676893-1.png)
