Vue过滤器和组件

Java程序猿哦~

已于 2022-04-12 23:58:11 修改

阅读量866

点赞数

文章标签： vue

于 2022-04-11 16:12:07 首次发布

本文链接：https://blog.csdn.net/m0_64896985/article/details/124101136

版权

过滤器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="js/vue.js" type="text/javascript"></script>
</head>
<body>
    <div id="app">
        <input type="text" v-model="msg">
        {{msg |upper}}
        {{msg |lower}}
        {{msg |test}}
        {{data |formate("yyyy-MM-dd hh:mm:ss")}}
    </div>
    <script type="text/javascript">
        //全局过滤器
        // 调用  {{ msg | 过滤器名字() }} upper过滤器名字,value过滤的数据
        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',function(value,arg1){
            if(arg1=='yyyy-MM-dd hh:mm:ss'){
                var t="";
                //getFullYear年 getMonth月 getDate日 getHours时 getMinutes分 getSeconds秒
                t+=value.getFullYear()+"-"+value.getMonth()+"-"+value.getDate()+" "+value.getHours()+":"+value.getMinutes()+":"+value.getSeconds();
                return t;
            }
            return value;
        })
        new Vue({
            el:"#app",
            data:{
                msg:"",
                data:new Date()
            },
            //局部过滤器
            filters: {
                test:function(val){
                    //把输入的数据首字母转化为大写 test过滤器名字,val过滤的数据
                    return val.charAt(0).toUpperCase()+val.slice(1);
                }
            }
        })
    </script>
</body>
</html>

组件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="js/vue.js" type="text/javascript"></script>
</head>
<body>
    <div id="app">
        <!-- 三个互不打扰，分别计算次数 -->
       <button-conianer></button-conianer>
       <button-conianer></button-conianer>
       <button-conianer></button-conianer>

       <!-- 在这里驼峰命名方式也需要改为短横线 -->
       <hello-word></hello-word>
       <!-- 局部组件 -->
        <hello-dog></hello-dog>
        <hello-tom></hello-tom>
        <hello-jerry></hello-jerry>
    </div>
    <script type="text/javascript">
        //组件命名方式 短横线方式
        Vue.component('button-conianer',{
            //data必须是一个函数
            data:function(){
                return{
                    count:0
                }
            },
            //组件模板内容必须是单个根元素
            // template:"<button v-on:click='count++'>点击了{{count}}次</button>"
            // template:"<div><button v-on:click='count++'>点击了{{count}}次</button><button>abc</button></div>"
            //增强代码观赏性 可以在开头和结尾加上 ` 就能够换行了
            template:
            `
            <div>
                <button v-on:click='count++'>点击了{{count}}次</button>
                <button>abc</button>
            </div>
            `
        })
        //组件命名方式 驼峰方式
        Vue.component('HelloWord',{
            //data必须是一个函数
            data:function(){
                return{
                    msg:"helloword"
                }
            },
            //组件模板内容必须是单个根元素
            // template:"<button v-on:click='count++'>点击了{{count}}次</button>"
            // template:"<div><button v-on:click='count++'>点击了{{count}}次</button><button>abc</button></div>"
            //增强代码观赏性 可以在开头和结尾加上 ` 就能够换行了
            template:
            `
            <div>
                {{msg}}
            </div>
            `
        });
        //局部组件需要var来定义
        var hellodog={
            data:function(){
                return{
                msg:"hello-dog"
            }
        },
        template:
        `
        <div>
        {{msg}}    
        </div>
        `
        };
        var hellotom={
            data:function(){
                return{
                msg:"hello-tom"
            }
        },
        template:
        `
        <div>
        {{msg}}    
        </div>
        `
        };
        var hellojerry={
            data:function(){
                return{
                msg:"hello-jerry"
            }
        },
        template:
        `
        <div>
        {{msg}}    
        </div>
        `
        };
        new Vue({
            el:"#app",
            data:{
              
            },
            //局部组件
            components:{
                "hello-dog":hellodog,
                "hello-tom":hellotom,
                "hello-jerry":hellojerry
            }
        })
    </script>
</body>
</html>

Java程序猿哦~

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Vue过滤器和组件

过滤器<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0"> <meta http-eq...
复制链接

扫一扫