vue过滤器filter

最新推荐文章于 2023-04-06 18:16:32 发布

哈哈西西）

最新推荐文章于 2023-04-06 18:16:32 发布

阅读量209

点赞数 1

文章标签： vue 过滤器

本文链接：https://blog.csdn.net/SugarXiXixi/article/details/109435146

版权

过滤器filter

过滤器可以用在两个地方：双花括号插值和 v-bind 表达式

<!-- 在双花括号中 -->
{{ message | capitalize }}

<!-- 在 `v-bind` 中 -->
<!-- :id被绑定的属性 （如style，href 等）
   rawId data中的值
   formatId 过滤器中的值
 -->

<div v-bind:id="rawId | formatId"></div>

全局过滤器

Vue.filter('capitalize', function (value) {
  if (!value) return ''
  value = value.toString()
  return value.charAt(0).toUpperCase() + value.slice(1)
})

组件内过滤器

filters: {
  capitalize: function (value) {
    if (!value) return ''
    value = value.toString()
    return value.charAt(0).toUpperCase() + value.slice(1)
  }
}

当全局过滤器和局部过滤器重名时，会采用局部过滤器。
过滤器使用示例
实现效果
在这里插入图片描述
具体代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>过滤器字符串首字母变大小写</title>
  <style>
    .red{
      background-color: red;
    }
    .yellow{
      background-color: yellow;
    }
  </style>
</head>
<body>
  <div id="app">
    <h2>过滤前：{{msg}}</h2>
    <h2>小写后：{{msg|f1}}</h2>
    <h2>大写后：{{ss|f2}}</h2>
    <h2>两个过滤器后：{{ss|f2|f3}}</h2>
    <h2>过滤器传参后：{{ss|f4('qq','oo')}}</h2>
    <div v-for='item in list' >
      <p :class='item|f5Color'>{{ss}}</p>
    </div>
    <p :class='msg|f5Color'>{{msg}}</p>
  </div>
  <script src="../js/vue.js">
  
  </script>
  <script>
    //全局  优先使用局部过滤器
    Vue.filter('f1',function(value){
      if(!value) return ''
          value =value.toString()
          return value.charAt(0).toLowerCase()+value.slice(1)
    })
    Vue.filter('f4',function(value,a1,a2){
      if(!value) return ''
      value=a1+value+a2
      return value
    })
    const app=new Vue({
      el:'#app',
      data:{
        msg:'WcCDCVJJSNHIDIMKKCAD125csac',
        ss:'wwwsw',
        list:[{
          type:0
        },{
          type:1
        }
        ,{
          type:1
        },
        {
          type:0
        },
        {
          type:1
        }
        ]
      },
      //组件内
      filters:{
        f2:function(value){
          if(!value) return ''
          value =value.toString()
          return value.charAt(0).toUpperCase()+value.slice(1)
        },
        f3:function(value){
          value =value.toString()
          value=value+'15868'
          return value
          
        },
        f5Color:function(value){
          return value.type!=0?'red':'yellow'
        },
        
      },


    })
  </script>
</body>
</html>

哈哈西西）

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue过滤器filter

过滤器filter过滤器可以用在两个地方：双花括号插值和 v-bind 表达式{{ message | capitalize }}<div v-bind:id="rawId | formatId"></div>全局过滤
复制链接

扫一扫