指示:
{ {文字列|部分的なフィルター名}}
<template>
<div id="app">
//这里
{
{
msg|hongzhe}}
</div>
</template>
<script>
export default {
data(){
return {
msg:"hello"
}
}
}
</script>
グローバルフィルター
main.jsにコードを追加し、前のコードブロックのメソッドを呼び出します
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
components: {
App },
template: '<App/>'
})
Vue.filter("hongzhe",function(value){
//如果字符串为空,返回。
if(!value){
return;
}
//获取字符串。
value=value.toString();
//将字符串的第一个字母大写并返回。
return value.charAt(0).toUpperCase()+value.slice(1);
});
ローカルフィルター
<template>
<div id="app">
//这里
{
{
msg|hongzhe}}
</div>
</template>
<script>
export default {
data(){
return {
msg:"hello"
}
},filters:{
upper(value){
//如果字符串为空,返回。
if(!value){
return;
}
//获取字符串。
value=value.toString();
//将字符串的第一个字母大写并返回。
return value.charAt(0).toUpperCase()+value.slice(1);
}
}
}
</script>