Vue过滤器和修饰符

最新推荐文章于 2024-09-05 18:22:53 发布

Yoren~

最新推荐文章于 2024-09-05 18:22:53 发布

阅读量104

点赞数 1

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/hafk12/article/details/130954999

版权

文章介绍了Vue.js中过滤器的使用，包括全局和私有定义，展示了如何过滤文本并实现日期格式化。同时，提到了键盘修饰符在事件监听中的应用，以及自定义指令的全局和私有定义方法，包括bind、inserted和update等生命周期钩子的使用。

摘要由CSDN通过智能技术生成

1.过滤器

在我们页面显示值之前加一层过滤，展示我们过滤后的值

使用语法

{{变量 | 过滤器名}}
{{变量 | 过滤器 | 另一个过滤器}} 可以同时使用多个过滤器，后面过滤器的data就是前面表达式传过来的值

(1)全局定义

Vue.filter()

(2）私有定义

filters：{}

<body>
        <h2>攻击敌方水晶!!!</h2>
        <div id="app">
            
            <h2>{{msg | dateFormat}}</h2>
        </div>
        <div id="app1">
            <h2>{{msg | dateFormat1}}</h2>
        </div>
    </body>
    <script>
        //全局过滤器 需写在实例化vue上面 都可以使用
        Vue.filter('dateFormat', function (data, format) {
            // console.log(data);
            // console.log(format);
            return data.replace('敌方', '??')
        })

        let vu = new Vue({
            el: '#app',
            data: {
                msg: '攻击敌方水晶!!!'
            },
            methods: {

            }
        })
        let vu1 = new Vue({
            el: '#app1',
            data: {
                msg: '攻击敌方水晶!!!'
            },
            //私有过滤器 需写在实例化vue里面，与data同级,只自己使用
            filters: {
                dateFormat1(data, format) {
                    return data.replace('水晶','卤蛋')
                }
            },
            methods: {

            }
        })
    </script>

需要注意的是：

全局定义一定要放在声明vue之前，否则导致程序报错

私有定义，与el、data、methods同级，可以声明多个私有定义，但只适用于自己

(2)实现日期过滤补0

 <div id="app">
            {{msg | dateformat}}
        </div>
    </body>
    <script>
        // 1.函数的第一个参数都是data，也就是我们要过滤的值。
        // 2.过滤器可以自定义一些参数。
        // 3.过滤器函数的返回值就是最终显示的值
        Vue.filter('dateformat', function (data, format) {
            //日期格式化
            console.log(data);
            let time = new Date()
            let y = time.getFullYear()
            let m = (time.getMonth() + 1).toString().padStart(2, '0')
            let d=time.getDay().toString().padStart(2,'0')
            console.log(time);
            console.log(y);
            console.log(m);
            return `${y}-${m}-${d}`;
            // console.log(format);
        })
        new Vue({
            el: '#app',
            data: {
                msg: 6666
            }
        })
    </script>

补充：

padStart()

这个是字符串提供的方法，所以我们先要保证调用的地方是个字符串

这个方法里两个参数 -

显示的位数

位数不足时在前面补充的内容

padEnd()

和上面用法一样，这个是在后面补一个值

2.键盘修饰符

vue提供的按键别名

.enter
.tab
.delete (捕获“删除”和“退格”键)
.esc
.space
.up
.down
.left

.righ

<body>
        <div id="app">
            <form class="form-inline" role="form" action="www">
                <div class="form-group">
                    <label class="" for="name">按下提交</label>
                    <input type="text" class="form-control" id="name" placeholder="请输入名称" @keyup.down="ger">
                    <input type="text" @keyup.a="ger">
                    <input type="text" @keyup.65="ger">
                    <input type="text" @keyup.left="ger">
                </div>
            </form>
        </div>
    </body>
    <script>
        new Vue({
            el: '#app',
            data: {

            },
            methods: {
                ger(){
                   console.log('提交成功');
                }
            }
        })
    </script>

3.自定义指令

(1)全局定义

使用这个方法进行全局定义：Vue.directive()

参数：

1. 指令的名字（定义的时候不加v-,使用vue指令的时候加上v-）

2. 对象，里面包含三个钩子方法

bind 只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置
inserted 这个元素已经渲染到界面上之后执行
update 当元素有更新的时候执行

3. 这三个方法的参数有哪些

el：指令所绑定的元素，可以用来直接操作 DOM 。
binding：一个对象，包含以下属性：
name：指令名，不包括 v- 前缀。
value：指令的绑定值，例如：v-my-directive="1 + 1" 中，绑定值为 2。
oldValue：指令绑定的前一个值，仅在 update 和 componentUpdated钩子中可用。无论值是否改变都可用。

(2)私有定义

实例里有个directives属性，这个属性是个对象
里面放的就是我们指令，这个对象键就是指令的名字，后面的对象就是指令的内容，和全局定义是一样的
简写直接写一个函数，函数名就是指令的名字，其他和全局定义是一样的。

<style>
            #app{
                font-size: 30px;
            }
        </style>
    </head>

    <body>
        <div id="app" v-color="'blue'">
            <input type="text" v-model="value" v-focus>
            <input type="text" v-model="value">
        </div>
        <!-- 指令的名字（定义的时候不加v-,使用vue指令的时候加上v-） -->
        <!-- bind 只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置
        inserted 这个元素已经渲染到界面上之后执行
        update 当元素有更新的时候执行 -->
        <!-- el：指令所绑定的元素，可以用来直接操作 DOM 。
        binding：一个对象，包含以下属性：
        name：指令名，不包括 v- 前缀。
        value：指令的绑定值，例如：v-my-directive="1 + 1" 中，绑定值为 2。
        oldValue：指令绑定的前一个值，仅在 update 和 componentUpdated钩子中可用。无论值是否改变都可用。 -->
    </body>
    <script>
        // 全局定义
        Vue.directive('color',{
            bind(el,bind){
                // el原生的dom元素
                // vue检测到指令绑定到界面元素的时候会执行这个方法
                console.log(el);
                el.style.color=bind.value
                console.log(bind);
            },
            // 在执行这个方法的时候界面上的元素已经显示出来
            inserted(el){
                // el.innerHTML+=9999
                // console.log(el);
            },
            update(el){
                el.innerHTML+=8888
            }
        })
        // 私有定义
        new Vue({
            el: '#app',
            data: {
                value:11111
            },
            directives:{
                //focus自动聚焦
                focus:{
                    inserted(el){
                        el.focus()
                    }
                }
            },
            methods: {

            }
        })
    </script>

Yoren~

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue过滤器和修饰符

(1)全局定义使用这个方法进行全局定义Vue.1. 指令的名字（定义的时候不加v-,使用vue指令的时候加上v-）2. 对象，里面包含三个钩子方法bind只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置inserted 这个元素已经渲染到界面上之后执行update 当元素有更新的时候执行3. 这三个方法的参数有哪些el：指令所绑定的元素，可以用来直接操作 DOM。binding：一个对象，包含以下属性：name：指令名，不包括 v- 前缀。
复制链接

扫一扫