<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>全局过滤器与局部过滤器区别</title>
</head>
<body>
<div id="app">
{{ 20 | priceToFixed }}
<hr>
{{ 20 | priceToFixed(2) }}
<hr>
<h2>首字母大写</h2>
{{'aabc'|word2FirstUpperCase2}}
</div>
<hr>
<div id="root1">
<h2>root</h2>
{{ 20 | priceToFixed(2) }}
<hr>
{{'aabc'|word2FirstUpperCase2}}
</div>
</body>
<script src="vue.js"></script>
<script>
//在实例化之前注册全局过滤器. Vue.filter( 名称，函数 ) 注册过滤器
Vue.filter('priceToFixed', (e, num = 2) => {
console.log(e);
//如果不传num默认为2
return e.toFixed(num)
})
new Vue({
el: '#app',
data: {
},
filters: {
word2FirstUpperCase2(e, num=1) {
//必须有return返回值
//console.log( e,'在你哪个数据后面使用了过滤器就会自动传递过来当前数据' );
console.log(num);
return e.substring(0, num).toUpperCase() + e.substring(num)
}
}
})
new Vue({
el:'#root1'
})
</script>
</html>
扫一扫
1611
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
