欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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指令(过滤器)

使用过滤器之后:

  1. 使用双括号的方式去添加过滤器
 <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)
})
  1. 方式三:
    直接在参数后面传入数据
<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
排名 菜名