Vue.js - 过滤器

最新推荐文章于 2022-06-07 22:10:36 发布

weixin_43331769

最新推荐文章于 2022-06-07 22:10:36 发布

阅读量163

点赞数

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/weixin_43331769/article/details/104075116

版权

vue 专栏收录该内容

23 篇文章 0 订阅

订阅专栏

Vue.js - 过滤器

一、自定义过滤器
二、局部过滤器
三、计算属性和过滤器的区别

一、自定义过滤器

格式：

Vue.filter(‘upper’, function (val) {
return val.charAt(0).toUpperCase() + val.slice(1);
});

过滤器的使用：

插值表达式：
< div>{{mes| upper}}< /div>
属性绑定：
< div :abc=“mes | upper”>测试数据< /div>

 <script type="text/javascript">
      window.onload = function () {
        Vue.filter('upper', function (val) {  upper表示过滤器的名字，
          return val.charAt(0).toUpperCase() + val.slice(1);
        });
        var vm = new Vue({
          el:'#app',
          data:{
            mes: ' '
          },
          methods:{

          }
        })
      }
    </script>
</head>
<body>
    <div id="app">
      <input type="text" v-model="mes">
      <div>{{mes| upper}}</div>
    </div>
</body>

显示结果：
在这里插入图片描述

二、局部过滤器

只有在组件内部可以使用

用法：在data数据域下边写；

filters:{ 局部过滤器
upper:function (val) {
return val.charAt(0).toUpperCase() + val.slice(1);
}
}

    <script type="text/javascript">
    window.onload = function () {
      var vm = new Vue({
        el:'#app',
        data:{
          mes: ''
        },
        filters:{     局部过滤器
          upper:function (val) {
            return val.charAt(0).toUpperCase() + val.slice(1);
          }
        }
      })
    }
  </script>
</head>
<body>
  <div id="app">
    <input type="text" v-model="mes">
    <div>{{mes|upper}}</div>
    <div :abc="mes | upper">测试数据</div>
  </div>
</body>

显示结果：
在这里插入图片描述

三、计算属性和过滤器的区别

在这里插入图片描述

weixin_43331769

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue.js - 过滤器

Vue.js - 过滤器一、自定义过滤器二、局部过滤器一、自定义过滤器格式：Vue.filter(‘upper’, function (val) {        return val.charAt(0).toUpperCase() + val.slice(1);});过滤器的使用：插值表达式：< div>{{m...
复制链接

扫一扫

专栏目录