过滤器
过滤器,本质上也是函数,作用:在于用户输入数据后,可以进行处理,并返回一个数据结果,vue3.x之前存在,3.x移除了过滤器,使用computed代替
过滤器写法
过滤器语法:使用管道符“|”进行连接
eg:
{{'abc' | uppercase}}
//'abc'-->'ABC'
{{'abc' | capitalize}}
//'abc'--->Abc
{{'ABC' | lowercase}}
//'ABC'--->'abc'
内置过滤器
computed实现字母操作
capitalize
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>过滤器测试</title>
<script src="../js/vue.min.js"></script>
</head>
<body>
<div id="app">
{{capitalize}}
</div>
<script>
let app = new Vue({
el: '#app',
data: {
message: 'abc'
},
computed: {
//首字母大写
capitalize: function (){
let str = this.message.substr(0,1).toUpperCase();
return str+this.message.substr(1,this.message.length-1);
}
}
})
</script>
</body>
</html>
因为我使用了3.x版本,是没有这些个处理字母的过滤器,就自己使用computed实现
uppercase/lowercase
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>过滤器测试</title>
<script src="../js/vue.min.js"></script>
</head>
<body>
<div id="app">
{{up}}
{{lw}}
{{hu}}
</div>
<script>
let app = new Vue({
el: '#app',
data: {
message: 'abc',
word: 'ABC'
},
computed: {
//转大写
up: function (){
return this.message.toUpperCase();
},
//小写
lw: function (){
return this.word.toLowerCase();
},
//首字母大写
hu: function (){
let str = this.message.substr(0,1).toUpperCase();
return str+this.message.substr(1,this.message.length-1);
}
}
})
</script>
</body>
</html>