<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>过滤</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.13/dist/vue.js"></script>
</head>
<body>
<div id="demo">
<p>原数据: {{msg}}</p>
<p>转大写: {{msg | upperCase}}</p>
<p>首字母大写: {{msg | upperCaseFirst}}</p>
<p>移除空格: {{msg | removeSpace}}</p>
<p>首字母大写且移除空格: {{msg | upperCaseFirst |removeSpace}}</p>
</div>
<script>
new Vue({
el: '#demo',
data: {
msg: 'my name is frank fang, my nunber is 7.'
},
filters: {
upperCase(val){
return val.toUpperCase();
},
upperCaseFirst(val){
var arr = val.split(' '); //按空格将字符串分割成数组
var newArr = arr.map(function(i){ //遍历数组
return i.charAt(0).toUpperCase() + i.slice(1); //每个单词的首字母转成大写,加上原始单词
});
return newArr.join(' ');
//return val.charAt(0).toUpperCase();
},
removeSpace(val){
return val.replace(/ /g,''); //用正则替换掉空格
}
}
})
</script>
</body>
</html>
vue过滤
最新推荐文章于 2021-05-25 19:36:28 发布