过滤器:
过滤器就是数据在真正渲染到页面中的时候,可以使用这个过滤器进行一些处理,把最终处理的结果渲染到网页中。
1. 使用:`{{username|strip}}`、`<a :href="url|strip">百度</a>`。
2. 定义:都是定义一个函数,这个函数的第一个参数永远都是被过滤的那个变量
  * 局部定义:在组件中添加一个`filters`,然后在`filters`中添加过滤器。
  * 全局定义:通过`Vue.filter('过滤器的名称',函数)`。
3. 传参:如果在使用过滤器的时候还需要传递额外的参数,那么可以在定义过滤器的时候,提供其他的参数。在使用的时候直接跟普通函数一样传递就可以了。

 

示例1:无参数过滤器

vue二十七:vue基础之过滤器

vue二十七:vue基础之过滤器

 

示例2:传参的过滤器

vue二十七:vue基础之过滤器

vue二十七:vue基础之过滤器

 

实际应用场景:

准备数据

vue二十七:vue基础之过滤器

获取数据

vue二十七:vue基础之过滤器

vue二十七:vue基础之过滤器

vue二十七:vue基础之过滤器

 

展示图片

vue二十七:vue基础之过滤器

vue二十七:vue基础之过滤器

对比一下发起图片请求的url和原网站的url,在链接中药自定义图片的长和宽

vue二十七:vue基础之过滤器

 

改造url

方法1:定义方法

vue二十七:vue基础之过滤器

vue二十七:vue基础之过滤器

 

方法2:使用过滤器

vue二十七:vue基础之过滤器

vue二十七:vue基础之过滤器

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="vue.js"></script>
</head>
<body>
<div
// }
// })
</script>
</body>
</html>

<!--http://p0.meituan.net/w.h/moviemachine/5dac476535359b7bb951ff15d37a9d0b153821.jpg-->
<!--https://p0.meituan.net/128.180/moviemachine/5dac476535359b7bb951ff15d37a9d0b153821.jpg-->

 

相关文章: