vue学习笔记（一） ---- vue指令（过滤器）

程序员文章站 2022-06-28 18:13:06

一、什么是过滤器官方文档：https://cn.vuejs.org/v2/guide/filters.html二、过滤器的使用没有使用过滤器之前：

...

一、什么是过滤器

官方文档：https://cn.vuejs.org/v2/guide/filters.html

二、过滤器的使用

没有使用过滤器之前：

<div id="app">
    <table>
        <thead>
        <tr>
            <th>排名</th>
            <th>菜名</th>
        </tr>
        </thead>
        <tbody>
        <tr v-for="item in list" :key="item.id">
            <td>{{ item.id }}</td>
            <td>{{ item.name}}</td>
        </tr>
        </tbody>
    </table>
</div>

<script>
    var vm = new Vue({
        el: '#app',
        data: {
            list: [
                { id: 1, name: '黄焖鸡' },
                { id: 2, name: '烤鱼'},
                { id: 3, name: '鸭血粉丝'},
                { id: 4, name: '大碗米线' },
                { id: 5, name: '螺蛳粉' },
                { id: 6, name: '鱼香肉丝'},
            ]
        }
    })
</script>

来吧展示：
vue学习笔记（一） ---- vue指令（过滤器）

使用过滤器之后：

使用双括号的方式去添加过滤器

 <tr v-for="item in list" :key="item.id">
            <td>{{ item.id }}</td>
            <td>{{ item.name | filterData }}</td>
 </tr>

Vue.filter('filterData',function () {
        console.log('过滤器被调用了。。。')
        return '螺蛳粉  my love~~'
    })
    //在vm实例对象之前去定义过滤器
var vm = new Vue({
    .........
})

来吧展示：

vue学习笔记（一） ---- vue指令（过滤器）

注意：过滤器的处理函数中的第一个参数已经规定死了，就是管道符前面的数，这里也就是item.name

如下：

Vue.filter('filterData',function (data) {
        console.log('过滤器被调用了。。。')
        return  data+ '~~~~~'
    })

vue学习笔记（一） ---- vue指令（过滤器）

三、给过滤器传递参数

 <td>{{ item.name | filterData('xxxxxxx')}}</td>

  Vue.filter('filterData',function (data,str) {
        return  data + str
 })

来吧展示：

vue学习笔记（一） ---- vue指令（过滤器）

四、使用多个过滤器

<td>{{ item.name | filterData | addstr}}</td>

 Vue.filter('filterData',function (data) {
        return  data+ '~~~~~'
    })
Vue.filter('addstr',function (data) {
         return  data + '哈哈哈哈哈'
   })

来吧展示：
vue学习笔记（一） ---- vue指令（过滤器）

五、全局过滤器的栗子

<div id="app">
    <p>{{msg}}</p>
</div>

var vm = new Vue({
   el: '#app',
   data: {
   msg: '鸭血粉丝里面放有:鸭血,鸭肠,鸭肝'
        },
   methods: {}
    });

vue学习笔记（一） ---- vue指令（过滤器）
使用全局过滤器，将"鸭"改成"猪"
方式一：

 <p>{{msg | filtermsg}}</p>

 Vue.filter('filtermsg',function (data) {
        // return data.replace('a','x')
        // replace只能替换掉第一项
        // 第一个参数传入正则,可以全局匹配
        return data.replace(/鸭/g,'猪')
})

vue学习笔记（一） ---- vue指令（过滤器）
2. 方式二：
在过滤器中传递参数

 <p>{{msg | filtermsg('猪')}}</p>

Vue.filter('filtermsg',function (data,str) {
   return data.replace(/鸭/g,str)
})

方式三：
直接在参数后面传入数据

<p>{{msg | filtermsg}}</p>

Vue.filter('filtermsg',function (data,str='猪') {
        return data.replace(/鸭/g,str)
})

如果定义了另外一个vm2实例
那么也可以使用全局过滤器

<body>

<div id="app">
    <p>{{msg | filtermsg}}</p>
</div>
<hr>


<div id="app2">
    <p>{{msg | filtermsg }}</p>
</div>

<script>
    Vue.filter('filtermsg',function (data,str='猪') {
        return data.replace(/鸭/g,str)
    })

    var vm = new Vue({
        el: '#app',
        data: {
            msg: '鸭血粉丝里面放有:鸭血,鸭肠,鸭肝'
        },
        methods: {}
    });
    var vm2 = new Vue({
        el:'#app2',
        data: {
            msg: '哇哦~是鸭血粉丝'
        },
        methods: {}
    });
</script>
</body>

vue学习笔记（一） ---- vue指令（过滤器）

六、私有过滤器

<div id="app2">
    <p>{{msg | filtermsg | addStr}}</p>
</div>

var vm2 = new Vue({
        el:'#app2',
        data: {
            msg: '哇哦~是鸭血粉丝'
        },
        methods: {},
         filters:{
            // addStr:function (data) {
             addStr(data){
                return data + '~~~~~~wao好好恰'
             }
        }

    });

vue学习笔记（一） ---- vue指令（过滤器）

注意：
私有过滤器只能vm2实例的容器才可以使用，vm实例的区域不能使用

如果全局过滤器与私有过滤器重名的话，会以就近原则，执行私有的过滤器

<div id="app2">
    <p>{{msg | filtermsg | addStr}}</p>
</div>

Vue.filter('filtermsg',function (data,str='猪') {
        return data.replace(/鸭/g,str)
})
var vm2 = new Vue({
        el:'#app2',
        data: {
            msg: '哇哦~是鸭血粉丝'
        },
        methods: {},
         filters:{
             // addStr:function (data) {
             addStr(data){
                return data + '~~~~~~wao好好恰'
             },
             filtermsg:function (data) {
                 // return data.replace(/鸭/g,str)
                 return data + '111111'
             }
        }
});

vue学习笔记（一） ---- vue指令（过滤器）

本文地址：https://blog.csdn.net/qq_45103612/article/details/109130909

vue学习笔记（一） ---- vue指令（过滤器）

一、什么是过滤器

二、过滤器的使用

三、给过滤器传递参数

四、使用多个过滤器

五、全局过滤器的栗子

六、私有过滤器

vue ssr 实现方式(学习笔记)

Vue2学习笔记之请求数据交互vue-resource

Vue2.5学习笔记之如何在项目中使用和配置Vue

Vue2.x 的笔记：第一次的感受 Vue 开篇

JavaScript的MVVM库Vue.js入门学习笔记

又一款MVVM组件 Vue基础语法和常用指令（1）

Vue2.5笔记：v-if 和 v-show指令

vue学习指南：第十一篇(详细) - Vue的路由第一篇 ( router )

前端笔记之Vue（一）初识SPA和Vue&webpack配置和vue安装&指令

Vue.js学习笔记之 helloworld

vue学习笔记（一） ---- vue指令（过滤器）

一、什么是过滤器

二、过滤器的使用

三、给过滤器传递参数

四、使用多个过滤器

五、全局过滤器的栗子

六、私有过滤器

vue ssr 实现方式(学习笔记)

Vue2学习笔记之请求数据交互vue-resource

Vue2.5学习笔记之如何在项目中使用和配置Vue

Vue2.x 的笔记：第一次的感受 Vue 开篇

JavaScript的MVVM库Vue.js入门学习笔记

又一款MVVM组件 Vue基础语法和常用指令（1）

Vue2.5笔记：v-if 和 v-show指令

vue学习指南：第十一篇(详细) - Vue的 路由 第一篇 ( router )

前端笔记之Vue（一）初识SPA和Vue&webpack配置和vue安装&指令

Vue.js学习笔记之 helloworld

vue学习指南：第十一篇(详细) - Vue的路由第一篇 ( router )