vue 自定义按键/指令/过滤器

最新推荐文章于 2022-08-30 22:04:04 发布
最新推荐文章于 2022-08-30 22:04:04 发布
阅读量314 收藏
点赞数
分类专栏： vue 文章标签： vue 指令 按键 过滤器
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40165172/article/details/82392321
版权

  1. 自定义过滤器

  • 语法

Vue.filter("过滤器1名称",function('原数据','arg1','arg2'){
    return  过滤数据;
})

Vue.filter("过滤器2名称",function('原数据','arg1','arg2'){
    return  过滤数据;
})

 

  • 使用 

<span>{{ "原数据"|过滤器1名称(arg1,arg2)|过滤器2名称(arg1,arg2) }}</span>

  • 注意

vue 过滤器 只能 再 v-bind 和 v-text 中使用 

 

  1. 自定义按键

  • 语法

Vue.config.keyCodes.f2 = 113;

  •  使用

<input type="text" @keyup.f2="add"/>

 

  1. 自定义指令

  • 语法

// 参数1：指令名称   参数2：是一个对象
Vue.directive('focus',{
    // 自定义指令函数中第一个参数永远是el
    // el表示被绑定指令的那个元素
    // el是一个原生的js对象 元素可以干什么el就可以干什么
    bind:fucntion(el){
        //当指令绑定到元素上的时候执行该方法 只执行一次
    }，
    inserted:function(el){
        // 元素插入到dom的使用执行该方法  只执行一次
    },
    updated:function(el){
        // 当VNode更新的时候执行该方法  可能执行多次
    }
})

  • 使用

<input type="text" v-focus/>

 

  1. 综合实例 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div id="app">
    <div class="panel panel-primary">
        <div class="panel-heading">
            <h3 class="panel-title">嘿嘿嘿,美女哟~~~</h3>
        </div>
        <div class="panel-body form-inline">
            <label>id
                <input type="text" v-model="id" @focus="hiddenMsg">
            </label>

            <label>姓名
                <input type="text" v-model="name" @keyup.f2="add">
            </label>

            <label>生日
                <input type="text" v-model="birthday">
            </label>

            <button @click="add">添加</button>

            <label>姓名模糊查询
                <input type="text" v-model="keyword" placeholder="请输入关键字" v-focus>
            </label>
        </div>
    </div>
    <table class="table table-bordered table-hover table-striped">
        <thead>
        <tr>
            <th>id</th>
            <th>姓名</th>
            <th>生日</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody>

        <tr v-for="item in search(keyword)" :key="item.id">
            <td>{{item.id}}</td>
            <td>{{item.name}}</td>
            <td>{{item.birthday|dateFormate("yyyy-MM-dd")}}</td>
            <td><a href="" @click.prevent="del(item.id)">删除</a></td>
        </tr>
        </tbody>
    </table>
    <h3>{{msg}}</h3>
</div>


<script>
    //自定义时间过滤器
    Vue.filter('dateFormate', function (datetime,fmt) {
        if (parseInt(datetime) == datetime) {
            if (datetime.length == 10) {
                datetime = parseInt(datetime) * 1000;
            } else if (datetime.length == 13) {
                datetime = parseInt(datetime);
            }
        }
        datetime = new Date(datetime);
        var o = {
            "M+": datetime.getMonth() + 1,                 //月份
            "d+": datetime.getDate(),                    //日
            "h+": datetime.getHours(),                   //小时
            "m+": datetime.getMinutes(),                 //分
            "s+": datetime.getSeconds(),                 //秒
            "q+": Math.floor((datetime.getMonth() + 3) / 3), //季度
            "S": datetime.getMilliseconds()             //毫秒
        };
        if (/(y+)/.test(fmt))
            fmt = fmt.replace(RegExp.$1, (datetime.getFullYear() + "").substr(4 - RegExp.$1.length));
        for (var k in o)
            if (new RegExp("(" + k + ")").test(fmt))
                fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
        return fmt;
    });


    // 自定义f2按键
    Vue.config.keyCodes.f2 = 113;


    // 自定义focus指令
    Vue.directive('focus',{
        inserted:function (el) {
            el.focus();
        }
    });


    // vue实例
    var vm = new Vue({
        el: '#app',
        data: {
            id: '',
            name: '',
            birthday: '',
            keyword: '',
            list: [
                {id: '1', name: '马思纯', birthday: '1992-09-09'},
                {id: '2', name: '李小冉', birthday: '1990-01-19'},
            ],
            msg: ''
        },
        methods: {

            // 添加方法
            add() {
                var girl = {
                    id: this.id,
                    name: this.name,
                    birthday: this.birthday == "" || this.birthday == null ? new Date() : this.birthday,
                };
                var falg = true;
                // some循环方法 
                this.list.some((item, i) => {
                    if (item.id == "" || item.id == null || item.id === this.id) {
                        this.msg = "嘿嘿嘿,id不能重复呦~~";
                        falg = false;
                        return true;
                    }
                });

                if (falg) {
                    this.list.push(girl);
                    this.msg = "";
                }
            },


            // 删除方法
            del(id) {
                // 循环 查找索引方法 findIndex
                var index = this.list.findIndex(item => {
                    if (item.id === this.id) {
                        return true;
                    }
                });
                this.list.splice(index, 1);
            },


            // 消息提示
            hiddenMsg() {
                this.msg = "";
            },


            // 搜索方法
            search(keyword) {
                /*
                 *  指令会自动的调用方法 如果有返回值  那么会返回给使用指令的地方  指令里的方法
                 *  如果有参数那么,参数会匹配 data中的model
                 */
                var newList = [];
                this.list.filter(item => {
                    if (item.name.indexOf(keyword) != -1) {
                        newList.push(item);
                    }
                })
                return newList;
            }
        }
    })
</script>

</body>
</html>

 

meeek
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue--》 Vue六大基础指令使用方法
ztK63LrD的博客
10-28 1773
1）使用v-on:xxx 或 @xxx 绑定事件。其中 xxx 是事件名。2）事件的回调需要配置在methods对象中，最终会在vm上。3）methods中配置的函数，不需要箭头函数！否则this就不是vm了4）methods中配置的函数，都是被Vue所管理的函数，this的指向是vm或组件实例对象5）@click="demo" 和 @click="demo($event)" 效果一致，但后者可以传参。
Vue自定义弹窗指令的实现代码
10-18
使用vue2.0实现自定义弹窗指令，当标签有该指令时，点击标签可以弹出弹窗。下面通过实例代码给大家介绍Vue自定义弹窗指令的相关知识，感兴趣的朋友一起看看吧
vue2.x 过滤器，自定义按键修饰符 ，自定义指令
05-08 143
1.过滤器全局：<element>{{ value | 过滤器名称}}</element>Vue.filter('过滤器名称'，function(value){ ...})局部： <element>{{ value | 过滤器名称}}</element> filters:{ //可以设置多个过滤器 '过滤器名称'：fun...
Vue 给按键配置权限角色
qq_42772400的博客
12-13 519
import directive from './directives' import permisson from './permisson' const importDirective = Vue => { /** * 拖拽指令 v-draggable="options" * options = { * trigger: /这里传入作为拖拽触发器的CSS选择器/, * body: /这里传入需要移动容器的CSS选择器/, * recover: /拖动
Vue定义全局过滤器，按键修饰符和全局指令
深海的鱼
12-07 216
Vue定义全局过滤器 语法： Vue.filter('msgFormat',function (msg,arg,arg2) { return msg.replace(/单纯/g,arg,arg2) }) 参数说明msgFormat表示过滤器名 msg表示通过管道传来的数据 arg表示在调用过滤器时在圆括号中第一个参数 arg2表示在调用过滤器时在圆括号中第二个参数 Vue自定义按键修...
过滤器、按键修饰符、自定义指令
weixin_39111384的博客
04-19 99
1、定义一个 Vue 全局的过滤器 filter 过滤器调用的格式： {{ name | 过滤器名称}} 实例： 将msg中的某个字符串进行替换 <p> {{ msg | msgFormat }} </p> //调用过滤器 //定义一个Vue 全局的过滤器，名字叫做 msgFormat Vue.filter('msgFormat',function(ms...
详解Vue自定义过滤器的实现
11-29
在Vue中，自定义过滤器是用于处理数据的一种机制，通常用于格式化或转换数据，使其更符合展示需求。本文将深入探讨如何在Vue中实现自定义过滤器。 一、全局注册自定义过滤器 1. 使用 `Vue.filter()` 方法来全局...
vue自定义指令实现方法详解
10-17
在Vue中，自定义指令（Custom Directives）是一个强大的特性，它允许我们扩展Vue的内置指令，如v-on、v-bind等，来实现更复杂的DOM操作。下面我们将详细探讨Vue自定义指令的定义、注册和使用方法。 ### 一、定义...
vue自定义filters过滤器
12-10
在项目中我们如果有多个filters，那么我怎么一次注册，全局可用，我们在项目里新建一个filters文件夹，如下，index.js是出口文件，readMore是一个对字符串做处理的过滤器 文件目录 下面贴上代码： //index.js // ...
Vue自定义指令封装节流函数的方法示例
08-27
Vue自定义指令封装节流函数的方法示例 今天，我们来讨论 Vue 自定义指令封装节流函数的方法示例。节流函数是一种常用的前端开发技术，用于避免过多的性能消耗。在《JavaScript高级程序设计》一书中，就有一个典型的...
vue.js框架 3（过滤器、按键修饰符、自定义v-指令）
这里的分享，都是干货
03-13 477
vue.js框架1、筛选过滤2、过滤器的使用3、字符串的padStart方法4、按键修饰符5、自定义v-指令：directive（） 1、筛选过滤 2、过滤器的使用 过滤器 | 可以使用正则 管道后面的函数传参 过滤器多次调用：这里的过滤器Vue.filter是全局的 字符串拼接：占位符 私有过滤器 3、字符串的padStart方法 4、按键修饰符 js里面内置了键盘事件...
vuejs基础之过滤器,键盘修饰符,实例生命周期
上善若泪
10-27 347
这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 欢迎使用Markdown编辑器 你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Mar
VUE的键盘事件
weixin_43228946的博客
08-30 1701
按键修饰符
VUE 事件修饰符以及按键码
大家好，我是 ed.
07-27 308
VUE 事件修饰符 之前写了一篇关于事件处理的文章，这篇的时间修饰符主要就是来修饰之前事件处理的事件名的，目的是为了扩展事件的功能。 事件修饰符 .stop：阻止单击事件继续传播，event.stopPropagation() .prevent：阻止事件默认行为 event.preventDefault() .once：点击事件将只会触发一次 ...
Vue按键修饰符常用按键对应keyCode
weixin_46407419的博客
04-05 1507
keyCode值及对应按键 keyCode按键48-570-965-90a-z/A-Z112-135F1-F248BackSpace(退格)9Tab13Enter(回车)20Caps_Lock(大写锁定)32Space(空格键)37Left(左箭头)38Up(上箭头)39Right(...
Vue.js —— 获取按键修饰符keyCode
小五
09-03 3560
在表单的输入和提交操作中，内容的复制粘贴操作等，都需要使用到一些特定的按键。 常用的按键码如下： .enter .tab .delete (捕获“删除”和“退格”键) .esc .space .up .down .left .right .ctrl .alt .shift .meta 举个栗子： // 按空格键触发Dosomething事件 <input type="text" @k...
VUE-使用键盘码实现添加操作
LzzMandy的博客
06-13 741
功能简介： 1、键盘 enter 键码是13； 2、在输入name 后，鼠标抬起后，按enter键，实现添加功能 关键点： 1、找到键盘上enter 键对应的码值 2、定义全局的键值 3、绑定键值 <label for="name"> name: <input type="text" v-model="name" name="nam...
22. Vue keycodes按键修饰符
DevOps海洋的渔夫@专栏
03-18 2342
需求 在业务开发中，例如：用户登录添加用户名和密码之后，按下回车键完成登录，这个操作就需要绑定按键的keyup事件，并且还要使用按键修饰符来指定按下的键盘按钮。 下面来看看另一个需求来逐步认识一下按钮修饰符。 按键修饰符 在监听键盘事件时，我们经常需要检查详细的按键。Vue 允许为 v-on 在监听键盘事件时添加按键修饰符： <!-- 只有在 `key` 是 `...
Vue学习笔记九：列表案例
dengtangda9444的博客
04-30 313
目录 前言 Bootstrap插件下载 Bootstrap表格和面板 增加数据，v-model和v-on 删除数据，事件修饰符和找索引的两种方法 查询数据，foreach和filter 全部的HTML 前言 V...
vue自定义指令
最新发布
05-24
Vue.js 提供了自定义指令的功能，可以用来封装常用的 DOM 操作或者添加特定的行为。自定义指令分为全局指令和局部指令两种。 ## 全局指令 在 Vue 实例化之前定义一个全局指令，这个指令可以在任何 Vue 实例中使用...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值