Vue学习之按键修饰符

小灰灰 2021-11-30 01:10 357阅读 0赞

# Vue按键修饰符 #

## 1.准备页面 ##

沿用前面案例的页面

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9kcGItYm9ib2thb3lhLXNtLmJsb2cuY3Nkbi5uZXQ_size_16_color_FFFFFF_t_70]

<!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"

![在这里插入图片描述][20190717155324876.gif]

效果

![在这里插入图片描述][20190717155447934.gif]

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

## 3.系统修饰键 ##

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9kcGItYm9ib2thb3lhLXNtLmJsb2cuY3Nkbi5uZXQ_size_16_color_FFFFFF_t_70 1]

比如: enter键

![在这里插入图片描述][20190717155912721.gif]

效果

![在这里插入图片描述][20190717160001390.gif]

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

## 4.自定义修饰键 ##

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9kcGItYm9ib2thb3lhLXNtLmJsb2cuY3Nkbi5uZXQ_size_16_color_FFFFFF_t_70 2]

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9kcGItYm9ib2thb3lhLXNtLmJsb2cuY3Nkbi5uZXQ_size_16_color_FFFFFF_t_70 3]

![在这里插入图片描述][20190717160340135.gif]

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

![在这里插入图片描述][20190717160947852.gif]

使用自定义的按键修饰符

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9kcGItYm9ib2thb3lhLXNtLmJsb2cuY3Nkbi5uZXQ_size_16_color_FFFFFF_t_70 4]

效果  
![在这里插入图片描述][20190717161100169.gif]

搞定~

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9kcGItYm9ib2thb3lhLXNtLmJsb2cuY3Nkbi5uZXQ_size_16_color_FFFFFF_t_70]: /images/20211129/f6c93ee5fca1413ca02108ff20bb2a47.png
[20190717155324876.gif]: /images/20211129/19f814cdbbb14dda9bafe5c31a379f2d.png
[20190717155447934.gif]: /images/20211129/574ae403a432466cbb52e57325a52821.png
[https_cn.vuejs.org_v2_guide_events.html]: https://cn.vuejs.org/v2/guide/events.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9kcGItYm9ib2thb3lhLXNtLmJsb2cuY3Nkbi5uZXQ_size_16_color_FFFFFF_t_70 1]: /images/20211129/9261df05d64a474e8198736fbaa5aae8.png
[20190717155912721.gif]: /images/20211129/63d5e5bc22ab4f2e8848fba74a06c6d9.png
[20190717160001390.gif]: /images/20211129/ba833e6189144e73a1ec151ed12fb11e.png
[https_dpb-bobokaoya-sm.blog.csdn.net_article_details_96280857]: https://dpb-bobokaoya-sm.blog.csdn.net/article/details/96280857
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9kcGItYm9ib2thb3lhLXNtLmJsb2cuY3Nkbi5uZXQ_size_16_color_FFFFFF_t_70 2]: /images/20211129/d147814f1631412091f201de69d2dbc2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9kcGItYm9ib2thb3lhLXNtLmJsb2cuY3Nkbi5uZXQ_size_16_color_FFFFFF_t_70 3]: /images/20211129/9744b9d1571240e7bfa2a015b61b5091.png
[20190717160340135.gif]: /images/20211129/58b4dc4abc6a4768876b098dec812cd6.png
[20190717160947852.gif]: /images/20211129/b19940f6caa640abb0f0f93cde2a0e1b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9kcGItYm9ib2thb3lhLXNtLmJsb2cuY3Nkbi5uZXQ_size_16_color_FFFFFF_t_70 4]: /images/20211129/2cd2b9c0842248cd890be76b9d3e42ef.png
[20190717161100169.gif]: /images/20211129/ebb50c33d23d4f4180e8774bd25aebc5.png