Vue学习之按键修饰符

Vue学习之按键修饰符Vue学习之按键修饰符

大家好,又见面了,我是你们的朋友全栈君。

Vue按键修饰符

1.准备页面

沿用前面案例的页面

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./lib/vue-2.4.0.js"></script>
    <link rel="stylesheet" href="./lib/bootstrap-3.3.7.css">
</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" class="form-control" v-model="id" >
                    </label>
            
                    <label>
                    Name:
                    <input type="text" class="form-control" v-model="name" >
                    </label>
            
                    
                    <input type="button" value="添加" 
                        class="btn btn-primary" @click='add'>

                    <label>
                        搜索名称关键字:
                        <input type="text" class="form-control" v-model="keywords">
                    </label>    
              </div>
        </div>
        
        
        
        <table class="table table-bordered table-hover table-striped">
            <thead>
                <tr>
                    <th>id</th>
                    <th>name</th>
                    <th>cTime</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="item in search(keywords)" :key="item.id">
                    <td>{
  
  {item.id}}</td>
                    <td>{
  
  {item.name}}</td>
                    <td>{
  
  {item.ctime | msgDateFormat('yyyy-mm-dd hh-mi-ss') }}</td>
                    <td><a href="" @click.prevent="del(item.id)">删除</a></td>
                </tr>
            </tbody>
        </table>
        
        
        
    </div>
    <script>
       
        var vm = new Vue({
            el: "#app",
            data: {
                id:'',
                name:'',
                keywords:'',
                list:[
                    {id:1,name:'奔驰',ctime:new Date()},
                    {id:2,name:'宝马',ctime:new Date()}
                ]
            },
            methods: {
                add(){
                    // 添加记录到list中
                    this.list.push({id:this.id,name:this.name,ctime:new Date()})
                    // 将输入框置空
                    this.id=this.name=''
                },
                del(id){
                    // some方法循环数组,返回true可以终止循环
                    // this.list.some((item,i) =>{
                     //   if(item.id == id){
                            // 移除记录 1 移除一条记录
                     //       this.list.splice(i,1);
                            // 返回true 终止循环
                      //      return true;
                      //  }
                    //}) 
                    // 通过findIndex方法获取要删除记录的index
                    var index = this.list.findIndex(item => {
                        if(item.id == id){
                            return true
                        }
                    })
                    // 通过splice方法来移除记录
                    this.list.splice(index,1);
                },
                search(keywords){
                    // 保存新的数组
                   // var newList = []
                   // this.list.forEach(item => {
                        // 判断循环的记录是否包含的查询的关键字
                       // if(item.name.indexOf(keywords) != -1){
                            // 将循环的记录添加到新的数组中
                         //   newList.push(item)
                      //  }
                  //  })
                    // 返回数组信息
                   // return newList
                  // filter 过滤  返回满足条件的数组
                  return  this.list.filter(item => {
                       // includes 是否包含
                       if(item.name.includes(keywords)){
                            return item
                       }
                   })
                }
            },
            filters:{ // 通过局部过滤器来实现
                msgDateFormat:function(msg,pattern=''){
                    // 将字符串转换为Date类型
                    var mt = new Date(msg)
                    // 获取年份
                    var y = mt.getFullYear()
                    // 获取月份 从0开始 
                    var m = (mt.getMonth()+1).toString().padStart(2,"0")
                    // 获取天数
                    var d = mt.getDate();
                    if(pattern === 'yyyy-mm-dd'){
                        return y+"-"+m+"-"+d
                    }
                    // 获取小时
                    var h = mt.getHours().toString().padStart(2,"0")
                    // 获取分钟
                    var mi = mt.getMinutes().toString().padStart(2,"0")
                    // 获取秒
                    var s = mt.getSeconds().toString().padStart(2,"0")
                    // 拼接为我们需要的各式
                    return y+"-"+m+"-"+d+" "+h+":"+mi+":"+s
                }
            }
        })
    </script>
</body>
</html>

2.keyup处理

我们希望当’品牌名称’输入完成后自动的调用”add”方法完成添加操作,这时我们可以给输入框绑定一个 键盘松开的事件”keyup”

在这里插入图片描述

效果

在这里插入图片描述

通过效果我们发现虽然效果实现了,但是并不是我们所希望的,这时我们可以添加对应的按键修饰符来处理。

3.系统修饰键

系统本身给我们提供的有几个修饰键,我们先来使用下(https://cn.vuejs.org/v2/guide/events.html)。

在这里插入图片描述

比如: enter键

在这里插入图片描述

效果

在这里插入图片描述

回车效果不好演示,自行脑补哦

4.自定义修饰键

系统提供的修饰键,就那么几个,这时如果我们想要自定义的话第一种方式就是使用按键对应的值来处理(https://dpb-bobokaoya-sm.blog.csdn.net/article/details/96280857)

在这里插入图片描述

比如我们要使用”F2″来实现 松开”F2″来添加数据的效果,可以如下实现

在这里插入图片描述

在这里插入图片描述

效果实现,但是 @keyup.113=”add”这种用具体值表示的方式并不是太容易记住,这时我们可以定义一个全局的按键修饰符,如下

在这里插入图片描述

使用自定义的按键修饰符

在这里插入图片描述

效果
在这里插入图片描述

搞定~

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/106497.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)
blank

相关推荐

  • 一款漂亮的网址永久发布页源码

    一款漂亮的网址永久发布页源码介绍:好看导航页面可自动测域名延迟html页面,可以做个网址导航引导页面!网盘下载地址:http://www.zijiepan2.xyz/XR7VmgADZXm正文:公众号投票系统,暂不支持小程序注:只支持认证服务号和认证订阅号借权支付,非认证公众号无法使用礼物功能1,域名自动切换,随机域名,炮灰域名(启用随机域名时,简介:没有后台直接html修改自己的资料就行网盘地址:http://zijiepan2.xyz/vJMdhdMSBuE图片:…

    2022年10月21日
  • linux用命令dpkg,Linux中的dpkg命令介绍

    linux用命令dpkg,Linux中的dpkg命令介绍导读dpkg是一个安装、构建、删除和管理Debian包的工具。所有源自“Debian”的linux的发行版都可使用dpkg命令,比如Ubuntu。语法:dpkg(选项)(参数)选项:-i:安装软件包-r:删除软件包-P:删除软件包的同时删除其配置文件-L:显示于软件包关联的文件–unpack:解开软件包-c:显示软件包内文件列表-configure:配置软件包参数:deb软件包列出deb软件包的…

  • Zabbix监控进程日志的配置过程[通俗易懂]

    Zabbix监控进程日志的配置过程

  • jupyter的代码能用pycharm运行吗_pycharm怎么登录

    jupyter的代码能用pycharm运行吗_pycharm怎么登录准备阶段:Professional版的PyCharm激活PyCharm,按照这个教程走的,因为内网机无法上网,用的第3种激活方法确认服务器的tensorflow调用GPU跑tf程序没问题。准备好SSH的usernameandpassword准备好SSH的usernameandpassword配置pycharmref:使用PyCharm通过SSH连接远程GP…

    2022年10月28日
  • trim函数去掉字符串首尾空格

    trim函数去掉字符串首尾空格trim():去掉字符串首尾的空格。public class trimDemo{ public static void main(String arg[]){ String a=" hello "; // 前后均有空格 String b="hello"; // 前后均无空格 System.out.println(b.equals(a)); /…

  • CSS中 RGB颜色查询对照表

    CSS中 RGB颜色查询对照表颜色代码表Ⅰ #000000 #2F0000 #600030 #460046 #28004D #272727 #4D0000 #820041 #5E005E #3A006F #3C3C3C #600000 #9F0050 #750075 #4B0091

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号