Vue自定义域名过滤器及全局的过滤器使用

1.过滤fliter（过滤掉不用的留下使用的）
2.管道符 | 两者之前可以互通
//本质起始就是方法（有输入和输出）
//过滤器通过管道符号|进行调用，支持多重过滤

通过一个例子来使用两者：

1.home.vue

   <ul>
      <!-- 循环遍历 -->
      <router-link :to="{name:'d',params:{pid:items.index}}" tag="li" v-for="(items,index) in list" :key="index">
        <img :src="items.image" :alt="items.image">
        <div>
          <p>{{items.name}}</p>
         //sumA是保留两位小数   //sumB是添加金钱￥
         //tofixed(n)将数值转换为定点实数的形式的字符串，且保留n位小数并四舍五入
          <p class="price">{{items.price|sumA| sumB('￥')}}</p>
        </div>
      </router-link>
    </ul>

2.在当前页面的引用

export default {//在抛出组件中使用
  filters:{
  sumA:function (value) {
    value = Number(value);
    return value.toFixed(2);//在括号内可以添加要保留的个数(n)
  },
  sumB:function(price,char){
			return char + price
		}
},

}

3.在全局中的使用（第一步）

min.js

Vue.filter('price',function (val) {
  return '￥'+val;
});
Vue.filter('mytofixed',function (val) {
  return val.toFixed(2);
});

4.在全局中使用的当前页面（第二步）
home.vue

  <ul>
          <router-link tag="li" v-for="(items,index) in list" :key="index"
            :to='{name:"detail",params:{pid:items.bookId}}'>
                  <img :src="items.bookImg" :alt="items.bookImg">
                  <div>
                     <p>{{items.bookName}}</p>
                     <span class="nowrop">{{items.bookInfo}}</span>
                     //在页面中引入全局自定义的名字(例如:myrofixed) (|管道符)
                     <p class="price">{{items.bookPrice |mytofixed | price }}</p>
                  </div>
              </router-link>
        </ul>