1、app.vue 使用methods实现：

<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计算属性实现：

<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实现：
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

<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

import Vue from 'vue'
import App from './App.vue'
new Vue({render: h => h(App)
}).$mount('#app')