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

过滤器：
过滤器就是数据在真正渲染到页面中的时候，可以使用这个过滤器进行一些处理，把最终处理的结果渲染到网页中。
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 id="app">
    <!--    <p>{{username|strip()}}</p>-->
    <!--    <p>{{username|strip("/")}}</p>-->

    <ul>
        <li v-for="data in datalist" :key="data.id">
            <h3>{{ data.nm }}</h3>
            <!--            <img :src="changepath(data.img)" >-->

            <img :src="data.img | replacepath">
        </li>
    </ul>
</div>

<script type="text/javascript">
    // 定义过滤器
    Vue.filter('replacepath', function (data) {
        return data.replace('w.h', '120.120')
    })

    new Vue({
        el: '#app',
        data: {
            datalist: []
        },
        methods: {
            // 修改url上指定的图片的尺寸
            changepath(path) {
                return path.replace('w.h', '120.120')
            }

        },
        mounted() {
            // 页面加载完后获取数据
            axios.get('maoyan.json').then(res => {
                console.log(res.data)
                this.datalist = res.data.movieList
            })
        }
    })

    // 定义名为strip的过滤器，功能为去掉空格
    // Vue.filter("strip",function(value){
    //     return value.replace(" ", "")
    // })
    // Vue.filter("strip", function (value, string) {
    //     return value.replace(" ", string)
    // })
    //
    // new Vue({
    //     el: '#app',
    //     data: {
    //         username: "用户 名"
    //     }
    // })
</script>
</body>
</html>

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

讨论群：249728408