Vue过滤器

最新推荐文章于 2024-07-04 10:07:27 发布

‘安’

最新推荐文章于 2024-07-04 10:07:27 发布

阅读量51

点赞数

分类专栏：笔记文章标签： vue.js javascript html

本文链接：https://blog.csdn.net/qq_48431032/article/details/119916084

版权

笔记专栏收录该内容

59 篇文章 0 订阅

订阅专栏

Vue过滤器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <title>Document</title>
</head>
<body>
    <div id="app">
        <input type="text" v-model="msg">
        <span>{{ msg | upper }}</span>
        <span>{{ msg | upper |  lower}}</span>

        <!-- 样式过滤器 -->
        <span v-bind:abc="msg|upper"></span>
        <span>{{ data | formate("yyyy-MM-dd") }}</span>


    </div>

    <script>
        //过滤器 名字是upper   value   就是你过滤的数据msg
        Vue.filter('upper',(value) => {
            return value.charAt(0).toUpperCase()+value.slice(1);
        })
        Vue.filter('lower',(value) => {
            return value.charAt(0).toLowerCase()+value.slice(1);
        })
        Vue.filter('formate',(value,args) => {
           if(args=="yyyy-MM-dd"){

            var reg="";
            reg+=value.getFullYear()+"-"+parseInt(value.getMonth() + 1)+"-"+value.getDate();
            return reg;
           }
           return value;
        })

        var vm=new  Vue({
            el:"#app",
            data:{
                msg:"hello",
                data:new Date()

            }
        })
    </script>
</body>
</html>