Vue 过滤器

最新推荐文章于 2022-07-01 19:49:20 发布

Seric.

最新推荐文章于 2022-07-01 19:49:20 发布

阅读量109

点赞数 1

分类专栏： Vue 文章标签： vue.js

本文链接：https://blog.csdn.net/Seric_xiao/article/details/120427849

版权

本文介绍了Vue.js中过滤器的基本使用和带参数的过滤器。过滤器主要用于数据的格式化，如字符串首字母大写和日期格式化。通过自定义全局和局部过滤器，我们可以方便地在模板中使用它们。带参数的过滤器允许传递数据到回调函数进行处理，提高代码的灵活性。

摘要由CSDN通过智能技术生成

1. 过滤器基本使用

过滤器在日常生活中也是比较常见的，例如自来水的过滤等。

在Vue中，过滤器的作用就是格式化数据，也就是对数据的过滤处理，比如将字符串格式化为首字母大写

或者将日期格式化为指定的格式等。

下面先看一下自定义过滤器的语法

Vue.filter('过滤器名称',function(value){
//value参数表示要处理的数据
  //过滤器业务逻辑，最终将处理后的数据进行返回
})

定义好以后可以使用。使用的方式如下：

<div>{
  {msg|upper}}</div>
<div>{
  {msg|upper|lower}}</div>

具体的程序如下：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>过滤器基本使用</title>
  </head>
  <body>
    <div id="app">
      <input type="text" v-model="msg" />
      <div>
          <!--使用过滤器-->
        {
  {msg|upper}}
      </div>
    </div>
    <script src="vue.js"></script>
    <script>
      //定义过滤器，让输入的单词首字母变成大写.
      Vue.filter("upper", function (value) {
        //获取首字母让其转换成大写，然后拼接后面的内容。
        return value.charAt(0).toUpperCase() + value.slice(0);
      });
      const vm = new Vue({
        el: "#app",
        data: {
          msg: "",
        },
      });
    </script>
  </body>
</html>

最低0.47元/天解锁文章

Seric.

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
Vue 过滤器

1. 过滤器基本使用过滤器在日常生活中也是比较常见的，例如自来水的过滤等。在Vue中，过滤器的作用就是格式化数据，也就是对数据的过滤处理，比如将字符串格式化为首字母大写或者将日期格式化为指定的格式等。下面先看一下自定义过滤器的语法Vue.filter('过滤器名称',function(value){//value参数表示要处理的数据 //过滤器业务逻辑，最终将处理后的数据进行返回})定义好以后可以使用。使用的方式如下：<div>{{msg|upper}}&
复制链接

扫一扫