微客导航 » 文章资讯 » vue 指令和过滤器的基本使用(品牌管理案例)

vue 指令和过滤器的基本使用(品牌管理案例)

2023-08-09 22:36:04 264

过滤器的基本使用

定义一个过滤器


{{msg|msgFormat('疯狂+1','123')|test}}

//定义一个Vue全局的过滤器，名字叫做msgFormat Vue.filter('msgFormat',function(msg,arg,arg2){ //字符串的replace方法，第一个参数，除了可写一个字符串之外，还可以定义一个正则 returnmsg.replace(/单纯/g,arg+arg2) }) Vue.filter('test',function(msg){ returnmsg+'========' }) //创建Vue实例，得到ViewModel varvm=newVue({ el:'#app', data:{ msg:'曾经，我也是一个单纯的少年，单纯的我，傻傻的问，谁是世界上最单纯的男人' }, methods:{} });

过滤器可以使用多个·

下面js代码的HTML部分





添加品牌

Id: Name:

搜索名称关键字：

Id Name Ctime Operation

{{item.id}} {{item.ctime|dateFormat()}} 删除

定义一个私有过滤器和私有指令

//如何自定义一个私有的过滤器（局部）
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（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

返回顶部
3162201930
czq8825@qq.com

vue 指令和过滤器的基本使用(品牌管理案例)

热门推荐

随机推荐