关于vue过滤的代码教程
程序员文章站
2023-02-28 12:07:21
关于vue过滤的代码教程
关于vue过滤的代码教程
<!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>
<p id="demo">
<p>原数据： {{msg}}</p>
<p>转大写： {{msg | upperCase}}</p>
<p>首字母大写： {{msg | upperCaseFirst}}</p>
<p>移除空格： {{msg | removeSpace}}</p>
<p>首字母大写且移除空格： {{msg | upperCaseFirst |removeSpace}}</p>
</p>
<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> 上一篇： 浅析黑帽seo与白帽seo的区别