vue 指令和过滤器的基本使用(品牌管理案例)
过滤器的基本使用
定义一个过滤器
{{msg|msgFormat('疯狂+1','123')|test}}
过滤器可以使用多个·
下面js代码的HTML部分
添加品牌
过滤器的基本使用
定义一个过滤器
{{msg|msgFormat('疯狂+1','123')|test}}
过滤器可以使用多个·
下面js代码的HTML部分
添加品牌
定义一个私有过滤器和私有指令
//如何自定义一个私有的过滤器(局部) varvm2=newVue({ el:'#app2', data:{ dt:newDate() }, methods:{}, filters:{//定义私有过滤器过滤器有两个条件【过滤器名称和处理函数】 //过滤器调用的时候,采用的是就近原则,如果私有过滤器和全局过滤器名称一致了,这时候优先调用私有过滤器 dateFormat:function(dateStr,pattern=''){ //根据给定的时间字符串,得到特定的时间 vardt=newDate(dateStr) //yyyy-mm-dd vary=dt.getFullYear() varm=(dt.getMonth()+1).toString().padStart(2,'0') vard=dt.getDate().toString().padStart(2,'0') if(pattern.toLowerCase()==='yyyy-mm-dd'){ return`${y}-${m}-${d}` }else{ varhh=dt.getHours().toString().padStart(2,'0') varmm=dt.getMinutes().toString().padStart(2,'0') varss=dt.getSeconds().toString().padStart(2,'0') return`${y}-${m}-${d}${hh}:${mm}:${ss}~~~~~~~` } } }, directives:{//自定义私有指令 'fontweight':{//设置字体粗细的 bind:function(el,binding){ el.style.fontWeight=binding.value } }, 'fontsize':function(el,binding){//注意:这个function等同于把代码写到了bind和update中去 el.style.fontSize=parseInt(binding.value)+'px' } } }) //过滤器的定义语法 //Vue.filter('过滤器的名称',function(){}) //过滤器中的function,第一个参数,已经被规定死了,永远都是过滤器管道符前面传递过来的数据 /*Vue.filter('过滤器的名称',function(data){ returndata+'123' })*/
全局过滤器
//全局的过滤器,进行时间的格式化 //所谓的全局过滤器,就是所有的VM实例都共享的 Vue.filter('dateFormat',function(dateStr,pattern=""){ //根据给定的时间字符串,得到特定的时间 vardt=newDate(dateStr) //yyyy-mm-dd vary=dt.getFullYear() varm=dt.getMonth()+1 vard=dt.getDate() //returny+'-'+m+'-'+d if(pattern.toLowerCase()==='yyyy-mm-dd'){ return`${y}-${m}-${d}` }else{ varhh=dt.getHours() varmm=dt.getMinutes() varss=dt.getSeconds() return`${y}-${m}-${d}${hh}:${mm}:${ss}` } }) //自定义全局按键修饰符 Vue.config.keyCodes.f2=113 Vue.directive()定义全局的指令 //其中:参数1:指令的名称,注意,在定义的时候,指令的名称前面,不需要加v-前缀, //但是:在调用的时候,必须在指令名称前加上v-前缀来进行调用 //参数2:是一个对象,这个对象身上,有一些指令相关的函数,这些函数可以在特定的阶段,执行相关的操作 Vue.directive('focus',{ bind:function(el){//每当指令绑定到元素上的时候,会立即执行这个bind函数,只执行一次 //注意:在每个函数中,第一个参数,永远是el,表示被绑定了指令的那个元素,这个el参数,是一个原生的JS对象 //在元素刚绑定了指令的时候,还没有插入到DOM中去,这时候,调用focus方法没有作用 //因为,一个元素,只有插入DOM之后,才能获取焦点 //el.focus() }, inserted:function(el){//inserted表示元素插入到DOM中的时候,会执行inserted函数【触发1次】 el.focus() //和JS行为有关的操作,最好在inserted中去执行,放置JS行为不生效 }, updated:function(el){//当VNode更新的时候,会执行updated,可能会触发多次 } })
自定义一个字体颜色的指令
//自定义一个设置字体颜色的指令 Vue.directive('color',{ //样式,只要通过指令绑定给了元素,不管这个元素有没有被插入到页面中去,这个元素肯定有了一个内联的样式 //将来元素肯定会显示到页面中,这时候,浏览器的渲染引擎必然会解析样式,应用给这个元素 bind:function(el,binding){ //el.style.color='red' //console.log(binding.name) //和样式相关的操作,一般都可以在bind执行 //console.log(binding.value) //console.log(binding.expression) el.style.color=binding.value } })
总结
以上所述是小编给大家介绍的vue指令和过滤器的基本使用(品牌管理案例),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!
声明:本文内容来源于网络,版权归原作者所有,内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎发送邮件至:czq8825#qq.com(发邮件时,请将#更换为@)进行举报,并提供相关证据,一经查实,本站将立刻删除涉嫌侵权内容。