好家伙,
//在双花括号中通过"管道符"调用 capitalize 过滤器,对 message的值进行格式化
{{ message | capi }}
//在v—bind 中通过“管道符”调用 formatid 过滤器,对rawld 的值进行格式化
<div id="app">
<p>message的值是:{{ message | capi }}</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<script>
const vm = new Vue({
el:'#app',
data:{
message:'you are so fucking handsome',
},
methods:{
},
filters:{
//在filters下定义capi
capi(val){
//字符串有charAt方法,这个方法接收索引值,表示从字符串中把索引对应的字符获取出来
// val.charAt(0)
// toUpperCase() 方法用于把字符串转换为大写
const first = val.charAt(0).toUpperCase()
// 字符串的slice方法,可以截取字符串,从指定索引往后截取
const other =val.slice(1)
// 过滤器中,一定要有一个返回值
return first + other
}
}
})
</script>
// 全局过滤器 — 独立于每个 vm 实例之外
// Vue.filter()方法接收两个参数:
Vue.filter('capitalize', (str) => {
// 第1个参数,是全局过滤器的"名字”
// 第2个参数,是全局过滤器的"处理函数”
return str.charAt(0).toUpperCase()+ str.slice(1) + '~~'
})