Vue过滤器filter

官方文档：

https://cn.vuejs.org/v2/guide/filters.html

一. 过滤器：

比如要为每个后台给的数字前都加一个￥符号，一个一个加不现实，所以借助过滤器来完成。字符串拼接方式也可以完成相同的功能，但为了程序便于维护可复用等，若要修改数据可以通过过滤器实现一改全改。

二. 全局过滤器:

1.项目名\src中创建filters的文件夹，里面放一个index.js文件

// 文件路径：文件名\src\filters\index.js
import Vue from 'vue'

// 全局过滤器
// 过滤器名：money
Vue.filter('money', function (value) {
        console.log(value);
        if(value){
        	// value为模板语法中的变量值
            return "￥" + value;
        };
})

2.引入filter文件
在vue项目的主入口main.js中添加如下代码，

import './filters'

3.App.vue文件中

export default {
  name: 'App',
  data(){
    return{
    // 模拟后台数据
      order:[
        {
          id:001,
          name:"数码相机",
          price:3999
        },
        {
          id:002,
          name:"显示屏",
          price:299
        }
      ]
    }
  },
 }

4.数据展示

// 子组件中使用过滤器
<template>
	<div>
	 	<ul>
	      <li v-for="(item,index) in order" :key="index">
	      // |money为名为money的过滤器的使用方式
	        <span>{{ item.name }}</span><span>{{ item.price | money}}</span>
	      </li>
	    </ul>
    </div>
</template>

5.运行结果

三. 局部过滤器：

1.局部过滤器，只在当前组件生效

// App.vue文件中
<template>
	<p>{{ word|author }}</p>
</template>

export default {
  name: 'App',
  data(){
    return{
      word:"掉凳了，记上",
    }
  },
  // 局部过滤器-- 只在当前组件生效
  filters:{
    author:function(val){
      if(val){
        return val+"----作者：武林外传-老邢"
      }
    }
  }
}

2. 运行结果：

四. 过滤器可以混用

1.使用2个过滤器

      <p>{{ bookName | author | money }}</p>

2.运行结果