菜鸟的我今天又被大佬嫌弃了,唉,抓紧时间学习吧,干啥啥不行,吃饭第一名。
Vue里过滤器的使用,首先是无参的,这个比较简单,在new出来的Vue里直接添加filter就可以了,用来实现大小写字母的转换操作,附上脚本的代码。
<script>
window.onload = () =>{
let mao = new Vue({
el:'#mao',
data:{
msg:''
},
methods:{
},
filters:{
UpperCase(value){
if(!value){
return '';
}
return value.toString().toUpperCase();
}
}
});
}
</script>
今天还学习了一种带参数的过滤器,也就是全局过滤器,主要就是Vue.filter(key,方法()),切割字符串,索引位置(0,3)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>v-filter</title>
<!--引入vue.js-->
<script type="text/javascript" src="../js/vue.js"></script>
<script>
Vue.filter('strSplit',function(value,start,end){
if(!value){
return '';
}
return value.toString().slice(start,end);
});
window.onload = () =>{
let mao = new Vue({
el:'#mao',
data:{
msg:'',
message:''
},
methods:{
},
filters:{
UpperCase(value){
if(!value){
return '';
}
return value.toString().toUpperCase();
}
}
});
}
</script>
</head>
<body>
<div id="mao">
<input type="text" v-model="msg" /><br />
<!--使用方法在这里-->
把小写字母转换成大写字母:{{msg | UpperCase}}
<input type="text" v-model="message" /><br />
字符串截取:{{message | strSplit(0,3)}}
</div>
</body>
</html>