Vue中使用过滤器filter

最新推荐文章于 2023-07-05 14:29:57 发布

南南合作

最新推荐文章于 2023-07-05 14:29:57 发布

阅读量425

点赞数

分类专栏： Vue 文章标签：过滤器

本文链接：https://blog.csdn.net/weixin_42442123/article/details/85094975

版权

Vue 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

 1. 定义方式
    可以在 new Vue({filters：{}})中的filters中注册一个私有过滤器
 2. 定义格式：
   new Vue({
           el:'#app',
           filters:{        
                   '过滤器名称':function(管道符号|左边对象的值,参数1,参数2,....) {
                     return 对管道符号|左边参数的值做处理以后的值
    })    
}
});
3.调用过滤器传参写法
 <span>{{ msg | 过滤器id('参数1','参数2' ....) }}</span>

<!DOCTYPE html>
<html lang="en">
<head>
    <title></title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="/vue2.js"></script>
    <style>
        #app {
            width: 600px;
            margin: 10px auto;
        }
        
        .tb {
            border-collapse: collapse;
            width: 100%;
        }
        
        .tb th {
            background-color: #0094ff;
            color: white;
        }
        
        .tb td,
        .tb th {
            padding: 5px;
            border: 1px solid black;
            text-align: center;
        }
        
        .add {
            padding: 5px;
            border: 1px solid black;
            margin-bottom: 10px;
        }
    </style>
</head>
<body>
    <div id="app">
        <div class="add">
            编号:
            <input type="text" v-model='newId' v-myfocus> 品牌名称:
            <input type="text" v-model='newName' v-mycolor='color'>
            <input type="button" value="添加" @click='add'>
        </div>

        <div class="add">
            品牌名称:
            <input type="text" placeholder="请输入搜索条件">
        </div>

        <div>
            <table class="tb">
                <tr>
                    <th>编号</th>
                    <th>品牌名称</th>
                    <th>创立时间</th>
                    <th>操作</th>
                </tr>
                <tr v-for='(item,index) in pings' :key='index'>
                    <td>{{item.id}}</td>
                    <td>{{item.name}}</td>
                    <td>{{item.ctime|filtime('/')}}</td>
                    <td>
                        <a href="#" @click='delete1(index)'>删除</a>
                    </td>
                </tr>
                <tr v-if='pings.length===0'>
                    <td colspan="4">没有品牌数据</td>
                </tr>
                <!-- 动态生成内容tr -->
            </table>
        </div>
    </div>
    </div>
    <script>
        //自定义指令
        Vue.directive('myfocus', {
            inserted: function(el, binding) {
                console.log(el)
                el.focus()
            }
        })
        Vue.directive('mycolor', {
            inserted: function(el, binding) {
                console.log(binding)
                el.style.color = binding.value
            }
        })

        var vm = new Vue({
            el: '#app',
            data: {
                newId: '',
                newName: '',
                color: 'red',
                pings: [{
                    id: 1,
                    name: 'LV',
                    ctime: new Date()
                }, {
                    id: 2,
                    name: 'MK',
                    ctime: new Date()
                }, {
                    id: 3,
                    name: 'Burberry',
                    ctime: new Date()
                }]

            },         
            //过滤器
            filters: {
                'filtime': function(time, sql) {
                    console.log(time)
                    var y = time.getFullYear();
                    var m = time.getMonth() + 1;
                    var d = time.getDate();
                    return y + sql + m + sql + d
                }
            },
            methods: {
                delete1(e) {
                    this.pings.splice(e, 1)
                },
                add() {
                    this.pings.push({
                        id: this.newId,
                        name: this.newName,
                        ctime: new Date()
                    })
                }
            }
        })
    </script>
</body>

</html>

南南合作

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue中使用过滤器filter

1. 定义方式可以在 new Vue({filters：{}})中的filters中注册一个私有过滤器 2. 定义格式： new Vue({ el:'#app', filters:{ '过滤器名称':function(管道符号|左边对象的值,参数1,参数2,....) { ...
复制链接

扫一扫