当前位置： 移动技术网 > IT编程>网页制作>CSS > 关于vue过滤的代码教程

关于vue过滤的代码教程

2018年03月18日  | 移动技术网IT编程  | 我要评论

地理必修一,泉州2套,mm洗衣服

关于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>

您可能感兴趣的文章:

如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网