私有过滤器和全局过滤器的使用

未及545

于 2022-10-12 09:31:27 发布

阅读量290

点赞数

文章标签： javascript vue.js 前端

本文链接：https://blog.csdn.net/qq_72760247/article/details/127276051

版权

过滤器

过滤器(Filters)是vue为开发者提供的功能，常用于文本的格式化。过滤器可与v-bind属性绑定。过滤器应该被添加在javascript表达式的尾部，由“管道符”进行调用。

1.私有过滤器

 <div class="app">
        <!-- |代表调用过滤器 | 的空格可有可无 Cap可以自定义-->
        <p>message的值是：{{message | Cap}}</p>
    </div>
 <script src="./vue.js"></script>
 <script>
const vm=new Vue({
    el:".app",
   data:{
        message:"hello world"
    },
    // 过滤器函数必须被定义在filters节点之下
    // 过滤器本身是一个函数，下面这个也被称为私有过滤器，只能自己使用
    filters:{
        //  Cap:function(){}简写Cap(){}
        // 过滤器函数形参中的value，永远都是管道符前面的那个值
        Cap(value){
            const first=value.charAt(0).toUpperCase()
            const other=value.slice(1)
            // 过滤器中，一定要有一个返回值,此处return的其他值会在页面覆盖掉hello world
            return first+other
        }
    }
})
 </script>

2.全局过滤器

<div id="app">
        <!-- |代表调用过滤器  Cap可以自定义-->
        <p>message的值是：{{message | Cap}}</p>
    </div>
    
    <div id="app1">
        <!-- |代表调用过滤器  Cap可以自定义-->
        <p>message的值是：{{message | Cap}}</p>
    </div>
    
    <script>

        // 使用Vue.filter（）定义全局过滤器
        // 如果全局过滤器和私有过滤器冲突的话，按照就近原则，调用的是私有过滤器
        Vue.filter("Cap", function (str) {
            const first = str.charAt(0).toUpperCase()
            const other = str.slice(1)
            return first + other 
        })
        const vm = new Vue({
            el: "#app",
            data: {
                message: "hello world"
            },
            // 过滤器函数必须被定义在filters节点之下
            // 过滤器本身是一个函数,可串联调用{{message| filtera（a1，a2） |filterb}}， message交给filtera处理，处理完之后再交给filterb，最后return出去
            // filter后面可传参，filter过滤器接参时只能从第二个接受，因为第一个值被占用了
            filters: {
                //  Cap:function(){}简写Cap(){}
                // 过滤器函数形参中的value，永远都是管道符前面的那个值
                Cap(value) {
                    const first = value.charAt(0).toUpperCase()
                    const other = value.slice(1)
                    // 过滤器中，一定要有一个返回值,此处return的其他值会在页面覆盖掉hello world
                    return first + other
                }
            }
        })

        const vm1 = new Vue({
            el: "#app1",
            data: {
                message: "today is good"
            }
        })
 </script>

3.在表格中关于对时间的使用以及表格的添加和删除

 <!--此处引入的bootstrap当中的表格的css样式  -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
        integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
        <!-- 此处引入day.js，调用时间 -->
        <script src="https://unpkg.com/dayjs@1.8.21/dayjs.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>

<body>
   <div id="app">
<table class="table table-striped table-bordered table-hover">
    <thead>
        <th>添加品牌</th>
    </thead>
    <tbody >
        <tr>
            <td><input type="text" value="请输入品牌名称" v-model.trim="brand"><button @click="add">添加品牌</button></td>   
        </tr>
       <th>#</th>
       <th>品牌名称</th>
       <th>状态</th>
       <th>创建时间</th>
       <th>操作</th>
       <tr v-for="item in list" :key="item.id">
        <td>{{item.id}}</td>
        <td>{{item.name}}</td>
        <td><div class="custom-control custom-switch">
            <input type="checkbox" class="custom-control-input" :id="'cd'+item.id" v-model="item.status
            ">
            <label class="custom-control-label" :for="'cd'+item.id" v-if="item.status">已启用</label>
            <label class="custom-control-label" :for="'cd'+item.id" v-else>已禁用</label>
        </div></td>
        <!-- <td>{{item.status}}</td> -->
        <td>{{item.time | datafilter}}</td>
        <td>
            <a href="javascript:;" @click="remove(item.id)">删除</a>
        </td>
        
       </tr>
    </tbody>
</table>

   </div>
    <script>
        // 利用过滤器处理时间，解决Wed Oct 12 2022 09:27:58 GMT+0800 (中国标准时间)的显示问题
    Vue.filter("datafilter",function(str){
      const   day=dayjs(str).format("YYYY-MM-DD HH:mm:ss")
       return day
    })
     const vm=new Vue({
        el:"#app",
        data:{
            // 用户输入的品牌名称
            brand:"",
            nextid:4,
            list:[
                {id:1,name:"宝马",status:true,time:new Date()},
                {id:2,name:"奔驰",status:false,time:new Date()},
                {id:3,name:"劳斯莱斯",status:true,time:new Date()},

            ]
        },
        methods: {
             remove(value) {
                 this.list = this.list.filter(item => item.id !== value)
             },
             add() {
                if(this.brand===""){
                    alert("请输入内容")
                }
               const  obj = {
                     id: this.nextid,
                     name: this.brand,
                     status: true,
                     time: new Date()
                 }
                 this.list.push(obj)
                 this.nextid++
                 this.brand=""
             }
         }
       

     })
    </script>