Vue 过滤器

Vue 渐进式JavaScript 框架 基于Vue2的学习笔记 - Vue 使用 - 过滤器

目录

过滤器

优化图片路径处理

定义过滤器

使用多个过滤器

总结

---

过滤器

优化图片路径处理

文件路径经过管道过滤器处理后，返回给图片路径，示例如下：

<div id="box">
    <button @click="handleClick">ajax-axios</button>
    <ul>
        <li v-for="item in datalist">
            <div>
                <img :src="item.cover | imgFilter" alt="" width="30px">{{item.title}}
            </div>
        </li>
    </ul>
</div>

定义过滤器

在vue中定义过滤器。

示例如下：

<script>
    Vue.filter("imgFilter", (url) => {
        return url.replace(".jpg", "/jpg?1=1")
    })

    let vm = new Vue({...})

使用多个过滤器

可以绑定多个过滤器 从左向右依次执行

<div id="box">
    <button @click="handleClick">ajax-axios</button>
    <ul>
        <li v-for="item in datalist">
            <div>
                <img :src="item.cover | imgFilter | imgFilter1 | imgFilter2" alt="" width="30px">{{item.title}}
            </div>
        </li>
    </ul>
</div>
<script>
    Vue.filter("imgFilter", (url) => {
        return url.replace(".jpg", "/jpg?1=1")
    })
    Vue.filter("imgFilter1", (url) => {
        return url + "&2=2"
    })
    Vue.filter("imgFilter2", (url) => {
        return url + "&3=3"
    })

注意：Vue3不支持

总结

Vue 渐进式JavaScript 框架 基于Vue2的学习笔记 - Vue 使用 - 过滤器