过滤器:
过滤器就是数据在真正渲染到页面中的时候,可以使用这个过滤器进行一些处理,把最终处理的结果渲染到网页中。
1. 使用:`{{username|strip}}`、`<a :href="url|strip">百度</a>`。
2. 定义:都是定义一个函数,这个函数的第一个参数永远都是被过滤的那个变量
* 局部定义:在组件中添加一个`filters`,然后在`filters`中添加过滤器。
* 全局定义:通过`Vue.filter('过滤器的名称',函数)`。
3. 传参:如果在使用过滤器的时候还需要传递额外的参数,那么可以在定义过滤器的时候,提供其他的参数。在使用的时候直接跟普通函数一样传递就可以了。
示例1:无参数过滤器
示例2:传参的过滤器
实际应用场景:
准备数据
获取数据
展示图片
对比一下发起图片请求的url和原网站的url,在链接中药自定义图片的长和宽
改造url
方法1:定义方法
方法2:使用过滤器
<!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-->