欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

关于vue过滤的代码教程

程序员文章站 2022-05-23 18:12:36
关于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>