事件处理-按键修饰符

js 里面的键盘事件对应的键码

  1 <!DOCTYPE html>
  2 <html lang="en">
  3
  4 <head>
  5   <meta charset="utf-8">
  6   <meta name="viewport" content="width=device-width,initial-scale=1.0">
  7   <title>Document</title>
  8   <!--1.导入Vue的包-->
  9   <script src=" https://cdn.jsdelivr.net/npm/vue"></script>
 10   <!-- <link rel="stylesheet" href="./lib/bootstrap.css"> -->
 11   <link rel="stylesheet" href=" https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
 12   <!-- 需要用到Jquery吗？？？不推荐在vue中使用Jquery -->
 13
 14 </head>
 15
 16 <body>
 17  <div id="app">
 18
 19   <div class="panel panel-primary">
 20     <div class="panel-heading">
 21       <h3 class="panel-title">添加品牌</h3>
 22     </div>
 23     <div class="panel-body form-inline">
 24       <label>
 25         Id:
 26         <input type="text" class="form-control" v-model="id">
 27       </label>
 28
 29       <label>
 30         Name:
 31         <input type="text" class="form-control" v-model="name" @keyup.f2="add">
 32       </label>
 33       <!-- 在vue中，使用事件绑定机制，为元素指定处理函数的时候，如果加了小括号，就可以给函数传参了 -->
 34       <input type="button" value="添加" class="btn btn-primary" @click="add()">
 35
 36       <label>
 37         搜索名称关键字：
 38         <input type="text" class="form-control" v-model="keywords">
 39       </label>
 40
 41     </div>
 42   </div>
 43
 44
 45
 46   <table class="table table-bordered table-hover table-striped">
 47     <thead>
 48       <tr>
 49         <th>Id</th>
 50         <th>Name</th>
 51         <th>Ctime</th>
 52         <th>Operation</th>
 53       </tr>
 54     </thead>
 55     <tbody>
 56      <!--  之前，v-for中的数据，都是直接从data上的list中直接渲染过来的 -->
 57      <!--  现在，我们自定义了一个方法，同时，把所有的关键字，通过传参的形式，传递给了search方法 -->
 58      <!-- 在search方法内部，通过执行for循环，把所有符合搜索关键字的数据，保存到一个新数组中，返回 -->
 59      <tr v-for="item in search(keywords)" :key="item.id">
 60       <td>{{item.id}}</td>
 61       <td v-text="item.name"></td>
 62       <td>{{ item.ctime | dateFormat()}}</td>
 63       <td>
 64         <a href="" @click.prevent="del(item.id)">删除</a>
 65       </td>
 66     </tr>
 67   </tbody>
 68 </table>
 69
 70
 71 </div>
 72
 73 <div id="app2">
 74   <h3>{{dt|dateFormat}}</h3>
 75 </div>
 76
 77
 78 <script>
 79     //全局的过滤器，进行时间的格式化
 80     //所谓的全局过滤器，就是所有的VM实例都共享
 81     Vue.filter('dateFormat',function(dateStr,pattern=""){
 82       //根据给定的时间字符串，得到特定的时间
 83       var dt = new Date(dateStr)
 84
 85       //yyyy-mm-dd
 86       var y=dt.getFullYear()
 87       var m=dt.getMonth()+1
 88       var d=dt.getDate()
 89
 90       // return y+'-'+m+'-'+d
 91       //模板字符串  ``
 92       // return `${y}-${m}-${d}`
 93
 94       if(pattern.toLowerCase() ==='yyyy-mm-dd'){
 95         return `${y}-${m}-${d}`
 96       }else{
 97         var hh=dt.getHours()
 98         var mm=dt.getMinutes()
 99         var ss=dt.getSeconds()
100
101         return `${y}-${m}-${d} ${hh}:${mm}:${ss}`
102       }
103
104     })
105
106     //自定义全局按键修饰符
107     Vue.config.keyCodes.f2=113
108
109
110           //创建 Vue 实例，得到 ViewModel
111           var vm =  new Vue({
112               el:'#app',
113         data:{
114           id:'',
115           name:'',
116           keywords:'',//搜索的关键字
117           list:[
118           {id:1,name:'奔驰',ctime:new Date()},
119           {id:2,name:'宝马',ctime:new Date()}
120           ]
121         },
122         methods:{
123           add(){//添加的方法
124             // console.log('ok')
125             //分析：
126             //1.获取到id 和name ，直接从data上面获取
127             //2.组织出一个对象
128             //3.把这个对下，调用数组的相关方法，添加到当前data上的list中
129             //4.注意：在Vue中，已经实现了数据的双向绑定，每当我们修改了data中的数据，Vue会默认监听到数据的改动，自动把最新的数据，应用到页面上；
130             //5.当我们意识到上面的第四部的时候，就证明大家已经入门Vue了，我们更多的是在进行VM中Model数据操作，同时，在操作Model数据的时候，指定的业务逻辑操作；
131
132             var car={id:this.id,name:this.name,ctime:new Date()}
133             this.list.push(car)
134             this.id=this.name=''
135           },
136           del(id){//根据Id删除数据
137             //分析：
138             //1.如何根据Id，找到要删除这一项的索引
139             //2.如果找到索引了，直接调用数组的splice方法
140
141            /* this.list.some((item,i)=>{
142               if(item.id==id){
143                 this.list.splice(i,1)
144                 //在数组的some方法中，如果return true,就会立即终止这个数组的后续循环
145                 return true;
146               }
147             })*/
148
149             var index = this.list.findIndex(item=>{
150               if(item.id==id){
151                 return true;
152               }
153             })
154             // console.log(index)
155             this.list.splice(index,1)
156           },
157
158           search(keywords){//根据关键字，进行数据的搜索
159           /*  var newList=[]
160             this.list.forEach(item=>{
161               if(item.name.indexOf(keywords)!=-1){
162                 newList.push(item)
163               }
164             })
165             return newList*/
166             //注意：forEach some filter findIndex   这些都属于数组的新方法，
167             //都会对数组中的每一项，进行遍历，执行相关操作；
168             return this.list.filter(item=>{
169               // if(item.name.indexOf(keywords)!=-1)
170               //注意：在ES6中，为字符串提供了一个新方法，叫做String.prototype.includes('要包含的字符串')
171               //如果包含，则返回true，否则返回false
172               //contains
173               if(item.name.includes(keywords)){
174                 return item
175               }
176             })
177           }
178         }
179       });
180
181       //如何自定义一个私有的过滤器（）
182       var vm2=new Vue({
183         el:'#app2',
184         data:{
185          dt:new Date()
186        },
187        methods:{},
188         filters:{//定义私有过滤器   过滤器有两个条件【过滤器名称和处理函数】
189           //过滤器调用的时候，采用的是就近原则，如果有过滤器和全局过滤器名称一致了，这时候 有线调用私有过滤器
190           dateFormat:function(dateStr,pattern=''){
191              //根据给定的时间字符串，得到特定的时间
192              var dt = new Date(dateStr)
193
194               //yyyy-mm-dd
195               var y=dt.getFullYear()
196               var m=(dt.getMonth()+1).toString().padStart(2,'0')
197               var d=(dt.getDate()).toString().padStart(2,'0')
198
199
200               if(pattern.toLowerCase() ==='yyyy-mm-dd'){
201                 return `${y}-${m}-${d}`
202               }else{
203                 var hh=dt.getHours().toString().padStart(2,'0')
204                 var mm=dt.getMinutes().toString().padStart(2,'0')
205                 var ss=dt.getSeconds().toString().padStart(2,'0')
206
207                 return `${y}-${m}-${d} ${hh}:${mm}:${ss} ~~~~~~~`
208               }
209             }
210           }
211
212 })
213
214
215     </script>
216   </body>
217   </html>

转载于:https://www.cnblogs.com/songsongblue/p/10990782.html

第二章 Vue快速入门-- 28 自定义按键修饰符相关推荐

Vue 自定义按键修饰符对应表
Vue 自定义按键修饰符对应表按键键码 8 BackSpace 9 Tab 12 Clear 13 Enter 16 Shift 17 Ctrl 18 Alt 19 Pause 20 Caps_L ...
事件——事件绑定||事件函数传参||事件修饰符||按键修饰符||自定义按键修饰符
事件绑定 <!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8& ...
01-vue(v-text,插值语法,v-html,v-model,v-on,v-bind,vue中的this,事件按键修饰符)
01- vue是什么: <!DOCTYPE html> <html lang="en"><head><meta charset=" ...
22. Vue keycodes按键修饰符
需求在业务开发中,例如:用户登录添加用户名和密码之后,按下回车键完成登录,这个操作就需要绑定按键的keyup事件,并且还要使用按键修饰符来指定按下的键盘按钮. 下面来看看另一个需求来逐步认识一下按钮 ...
004_Vue按键修饰符
1. 按键修饰符keyup 1.1. .enter回车键 <input v-on:keyup.enter="handleSubmit" /> 1.2. 代码 <! ...
vue 快速入门指南(一)
忆君心似西江水,日夜东流无歇时. 前言先聊一下前端开发模式的发展. 静态页面最初的网页以HTML为主,是纯静态的网页.网页是只读的,信息流只能从服务端到客户端单向流通.开发人员也只关心页面的样式和 ...
第 1 章 MybatisPlus 快速入门
第 1 章 MybatisPlus 快速入门 1.MybatisPlus 概述 MybatisPlus:一款 Mybatis 的增强工具包 MybatisPlus 官网:https://mybatis ...
Gradle2.0用户指南翻译——第七章. Java 快速入门
翻译项目请关注Github上的地址: https://github.com/msdx/gradledoc 本文翻译所在分支: https://github.com/msdx/gradledoc/tre ...
b站黑马的Vue快速入门案例代码——【axios+Vue2】悦听player(音乐播放器)
目录本文中修改的原代码中的BUG: 修改方法: 本文案例代码仍有的BUG:(欢迎大家献计献策) 目标效果: 悦音player案例--效果展示视频: 更换的新接口/参数: 1.歌曲搜索接口:https ...

第二章 Vue快速入门-- 28 自定义按键修饰符

js 里面的键盘事件对应的键码

第二章 Vue快速入门-- 28 自定义按键修饰符相关推荐

最新文章

热门文章