目录过滤器 01. 是什么 02. 怎么做 (1)定义过滤器 (2)使用方式 (3)过滤器的参数03. 封装过滤器函数 自定义指令 01. 是什么 02. 基本概念 (1)钩子函数
过滤器可以对我们传入的数据进行必要的处理,并返回处理的结果
export default {
// 通过filters创建局部过滤器
filters:{
过滤器名称(data){
// 对传入的data 进行处理
return 处理结果
}
}
}
通过filters结构来创建
export default {
// 通过filters创建局部过滤器
filters:{
过滤器名称(data){
// 进行处理
return 处理结果
}
}
}
需要在Vue实例创建之前定义
Vue.filter(过滤器名称,(data) => {
// do something
return 处理结果
})
在单独的文件中创建一个全局过滤器
在需要用到的组件中引入,并在filters中注册
import Vue from 'vue'
// 通过Vue.filter创建全局过滤器
const filter1 = Vue.filter(过滤器名称,(data) => {
// do something
return 处理结果
})
// 导出
export {
filter1
}
// 在组件中--引入过滤器
import { filter1 } from '@/utils/filters.js'
export default {
// 在组件内的 filters中,添加过滤器
// filters既可以创建过滤器,又可以用来注册过滤器
// 只有在filters中注册的才会被认为是过滤器
filters: {
filter1
}
}
<div> {{ 数据 | 过滤器 }} </div>
过滤器支持多个并行使用,前者的处理结果,将作为后者的参数传入
<div> {{ 数据 | 过滤器1 | 过滤器2 }}</div>
// 定义函数
const filterA = () => {}
const filterB = () => {}
// 导出函数对象
export { filterA, filterB }
import * as filters from './filters.js'
//遍历 filters.js 内的方法
Object.keys(filters).forEach(key => {
Vue.filter(key, filters[key])
})
一个指令定义对象可以提供如下几个钩子函数 (均为可选):
指令钩子函数会被传入以下参数:
// <div v-demo:left="100"></div>
// 这里的 left 即为指令的 bingding对象的arg
// 100 即为指令的 bingding对象的value
Vue.directive('demo',{
// el--表示被绑定的元素,即指令在放置的那一个元素
bind(el,binding,vnode){
// 可以直接对这个元素进行一些处理
el.style.position = 'fixed';
const s = ( binding.arg == 'left' ? 'left' : top );
el.style[s] = binding.value + 'px';
}
})
通过 Vue.directive() 方式注册全局指令,包含两个参数:
Vue.directive("指令名称", {
inserted: function(el){
// do something
}
})
通过在Vue实例中添加 directives 对象数据注册局部自定义指令
export default {
directives: {
指令名:{
函数
}
}
}
以上就是vue 过滤器和自定义指令的使用的详细内容,更多关于vue 过滤器和自定义指令的资料请关注编程网其它相关文章!
--结束END--
本文标题: vue 过滤器和自定义指令的使用
本文链接: https://www.lsjlt.com/news/126426.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑,方便收藏和打印~
2024-01-12
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
0