Vue---过滤器（filters）新手详细使用方法

最新推荐文章于 2024-05-11 07:26:08 发布

划船不用桨Ai

最新推荐文章于 2024-05-11 07:26:08 发布

阅读量832

点赞数

文章标签： vue

本文链接：https://blog.csdn.net/weixin_43770374/article/details/105182830

版权

一、Vue.js 允许你自定义过滤器，可被用于一些常见的文本格式化。过滤器可以用在两个地方：双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持)。过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符号指示
1、首先要搭建好vue环境，可以选择使用网络地址或者在本地使用npm方法安装，再这里并不建议大家全局安装vue。

# 最新稳定版
$ npm install vue

2、创建好相应的html木模块

<body>
    <div class="filters">
        <h1 v-text="filtersTitle"></h1>
        <input v-model="filtersText"/>
        <div>{{filtersText | filtersTextChange}}</div>
      </div>
</body>

3、引入 node_modules 文件夹下的

/vue/dist/vue.js文件

<script src="./node_modules/vue/dist/vue.js"></script>

4、接下来便是使用咱们的过滤器了

<script>
    const app=new Vue({ 
        el:'.filters', //这里是我们上面创建好的div模块 通过el方法获取
      vm : {},  //声明一个空数组用来存放输入框里面所存放的数组
      data() { //data后面如果不使用函数的形式 可以直接使用this
        vm = this;
        return {
          filtersTitle: 'vue过滤器学习，filters',//h1标签里所展示的信息
          arrayList: [//这是我们自定义的数组
            {
              "code": "1",
              "value": "北京市"
            },
            {
              "code": "2",
              "value": "上海市"
            },
            {
              "code": "3",
              "value": "广州市"
            },
            {
              "code": "4",
              "value": "深圳市"
            },
            {
              "code": "5",
              "value": "杭州市"
            },
            {
              "code": "6",
              "value": "天津市"
            },
            {
              "code": "7",
              "value": "西安市"
            },
            {
              "code": "8",
              "value": "武汉市"
            },
            {
              "code": "9",
              "value": "长沙市"
            }
          ],
          filtersText: '1',//input框中默认显示的数字
        }
      },
      filters: { //这里便是我们的过滤器了
        filtersTextChange: function (dataStr) {
          let arrayList = vm.arrayList;
          let value = '没有这个城市 ';
          for (let b of arrayList) {
            if (b.code == dataStr) {//b里面有很多属性
                console.log(b)
                console.log(b.code)
              value = b.value;
              console.log(value)
              break;
            }
          }
          return value;//若果相等便将这个地址返回
        }
      }
    
    })
    
  </script>

（1）过滤器定义方法1：通过Vue.filter 方法定义过滤器，参数1为过滤器名称，参数2位过滤器处理函数
（2）过滤器处理函数中的参数就是管道符前面的变量的值
（3）过滤器必须有返回值，否则插值表达式中的变量即不会显示
（4）在过滤器处理函数中，可以对变量的值进行处理之后再返回

划船不用桨Ai

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue---过滤器（filters）新手详细使用方法

一、Vue.js 允许你自定义过滤器，可被用于一些常见的文本格式化。过滤器可以用在两个地方：双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持)。过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符号指示首要搭建好vue环境，可以选择使用网络地址或者在本地使用npm方法安装，再这里并不建议大家全局安装vue。# 最新稳定版$ npm install v...
复制链接

扫一扫