2021-7-12 VUE的过滤器使用

过滤器实例：转换首字母大写

<!DOCTYPE html>
<html>
<head>
    <title>        
    </title>
</head>
<body>
<div id="app">
  <input type="text" name="" v-model="uname">
   <div>{{uname | toUpper}}</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script type="text/javascript"></script>
<script type="text/javascript">

Vue.filter('toUpper',function(val){
  var a= val.charAt(0).toUpperCase()+val.slice(1);
  return a;
});
new Vue({
  el: '#app',
  data: {
    uname:'hallo',
  }
})
</script>
</body>
</html>
View Code

 过滤器的局部使用，以及在绑定属性中的使用实例

<!DOCTYPE html>
<html>
<head>
    <title>        
    </title>
</head>
<body>
<div id="app">
  <input type="text" name="" v-model="uname">
   <div :abc="uname | toUpper">{{uname | toLower}}</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script type="text/javascript"></script>
<script type="text/javascript">
new Vue({
  el: '#app',
  data: {
    uname:'Hallo',
  },
  filters:{
    toLower:function(val){
      var a= val.toLowerCase();
      return a;
    },
    toUpper:function(val){
      return val.toUpperCase();
    }
  }
})
</script>
</body>
</html>
View Code

 带参数的过滤器实例

<!DOCTYPE html>
<html>
<head>
    <title>        
    </title>
</head>
<body>
<div id="app">
  <input type="text" name="" v-model="uname">
   <div :abc="uname | toUpper">{{uname | toLower("aa","bb")}}</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script type="text/javascript"></script>
<script type="text/javascript">
new Vue({
  el: '#app',
  data: {
    uname:'Hallo',
  },
  filters:{
    toLower:function(val,arg,arg1){
      var a= val.toLowerCase()+arg+arg1;
      return a;
    }
  }
})
</script>
</body>
</html>
View Code

 

posted @ 2021-07-12 09:47  月长生  阅读(43)  评论(0)    收藏  举报