Vue.js学习笔记:过滤器、自定义按键修饰符、指令

2020-05-0915:11:03WEB前端开发Comments1,710 views字数 1668阅读模式

允许你自定义过滤器,可被用作一些常见的文本格式化。过滤器可以用在两个地方:mustache 插值和 v-bind 表达式。过滤器应该被添加在 JavaScript 表达式的尾部,由“管道”符指示;文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/18667.html

私有过滤器

1、HTML元素:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/18667.html

<td>{{item.ctime |dataFormat('yyyy-mm-dd')}}</td>

2、私有 filters 定义方式:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/18667.html

filters:{dataFormat(input, pattern =""){var dt =newDate(input);var y = dt.getFullYear();var m =(dt.getMonth()+1).toString().padStart(2,'0');var d = dt.getDate().toString().padStart(2,'0');if(pattern.toLowerCase()==='yyyy-mm-dd'){return`${y}-${m}-${d}`;}else{var hh = dt.getHours().toString().padStart(2,'0');var mm = dt.getMinutes().toString().padStart(2,'0');var ss = dt.getSeconds().toString().padStart(2,'0');return`${y}-${m}-${d}${hh}:${mm}:${ss}`;}}}

使用ES6中的字符串新方法 (maxLength, fillString=’’) 或 (maxLength, fillString=’’)来填充字符串;文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/18667.html

全局过滤器


Vue.filter('dataFormat',function(input, pattern =''){var dt =newDate(input);var y = dt.getFullYear();var m =(dt.getMonth()+1).toString().padStart(2,'0');var d = dt.getDate().toString().padStart(2,'0');if(pattern.toLowerCase()==='yyyy-mm-dd'){return`${y}-${m}-${d}`;}else{var hh = dt.getHours().toString().padStart(2,'0');var mm = dt.getMinutes().toString().padStart(2,'0');var ss = dt.getSeconds().toString().padStart(2,'0');return`${y}-${m}-${d}${hh}:${mm}:${ss}`;}});

注意:当有局部和全局两个名称相同的过滤器时候,会以就近原则进行调用,即:局部过滤器优先于全局过滤器被调用!文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/18667.html

自定义键盘修饰符

1、通过.名称 = 按键值来自定义案件修饰符的别名:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/18667.html

Vue.config.keyCodes.f2 =113;

2、使用自定义的按键修饰符:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/18667.html

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

自定义指令

https://cn.vuejs.org/v2/guide/custom-directive.html文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/18667.html

1、自定义全局和局部的 自定义指令:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/18667.html


 Vue.directive('focus',{
   inserted:function(el){
     el.focus();}});
   directives:{
     color:{bind(el, binding){
         el.style.color = binding.value;}},'font-weight':function(el, binding2){
       el.style.fontWeight = binding2.value;}}

2、自定义指令的使用方式:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/18667.html

<input type="text" v-model="searchName" v-focus v-color="'red'" v-font-weight="900">
文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/18667.html
  • 本站内容整理自互联网,仅提供信息存储空间服务,以方便学习之用。如对文章、图片、字体等版权有疑问,请在下方留言,管理员看到后,将第一时间进行处理。
  • 转载请务必保留本文链接:https://www.cainiaoxueyuan.com/gcs/18667.html

Comment

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定