一、过滤器的使用及定义
1.1 如何使用过滤器:
重点来咯📣
①使用场景
用于格式化内容(如:日期的格式转换、大小写的转换等)
②使用方法
{{data中数据 | 过滤器名字}} 例如:下图中{{msg | toUp}}
<body>
<div id="app" v-cloak>
<p>{{msg}}</p>
<p>{{msg | toUp}}</p>
</div>
<script src="vuejs-2.5.16.js"></script>
<script>
Vue.filter('toUp', (v) => {
return v.charAt(0).toUpperCase() + v.substr(1)
});
var vm = new Vue({
el: '#app',
data: {
msg: 'abc'
},
methods: {}
});
</script>
</body>
1.2 过滤器的分类及串联使用
①全局过滤器
定义: ?????在vue实例之前定义的过滤器是全局过滤器;定义方法是:Vue.filter(‘过滤器名字’,function(){})
具体步骤: ?????①在vue实例之前使用Vue.filter(‘过滤器名字’,function(){})(注意标点符号) ?????②在过滤器函数中实现具体的过滤方式,function(v) ;v 是指当前过滤器的调用者 被处理的数据 自带参数 ?????③在视图中使用过滤器 {{msg | 过滤器名字}}
<body>
<div id="app" v-cloak>
<p>{{msg}}</p>
<p>{{msg | toUp}}</p>
</div>
<script src="vuejs-2.5.16.js"></script>
<script>
Vue.filter('toUp', (v) => {
return v.charAt(0).toUpperCase() + v.substr(1)
});
var vm = new Vue({
el: '#app',
data: {
msg: 'abc'
},
methods: {}
});
</script>
</body>
②局部过滤器
定义: ?????在vue实例中定义的过滤器是局部过滤器;定义方法是:filters:{function(v) { } }
具体步骤: ?????①在vue实例中使用实例 filters:{ function() { } }(注意标点符号) ?????②在过滤器函数中实现具体的过滤方式,function(v) ;v 是指当前过滤器的调用者 被处理的数据 自带参数 ?????③在视图中使用过滤器 {{msg | 过滤器名字}}
<script>
var vm = new Vue({
el: '#app',
data: {
msg: "abc"
},
filters: {
toUp(v) {
return v.charAt(0).toUpperCase() + v.substr(1)
}
},
methods: {}
});
</script>
③串联使用过滤器
使用方法: ?????{{msg | 过滤器1(v) | 过滤器2(v,y)}}
🌈过滤器是可以传递参数的哦
<body>
<div id="app">
<!-- 过滤器的串联使用 {{data数据 | 过滤器1 | 过滤器2}} -->
{{money | toD |toY('元')}}
</div>
<script src="vuejs-2.5.16.js"></script>
<script>
Vue.filter('toD', (v) => {
return "$" + v
});
Vue.filter('toY', (v, y) => {
return "$" + v + y
});
var vm = new Vue({
el: '#app',
data: {
money: 1000
},
methods: {}
});
</script>
</body>
1.3 如何自定义一个指令?(重点掌握)
①自定义指令的分类及使用
场景:适用于系统指令中没有的情况下
全局指令(整个页面适用)
定义: ?????在vue实例中定义的过滤器是局部过滤器;定义方法是:Vue.directive(‘指令名’,{inserted(el){}}) 具体步骤: ①在vue实例之前Vue.directive(‘指令名’,{inserted(el){}}) ② 在inserted(el){自定义指令的具体功能}(el是指调用该该指令的的调用者(dom元素)) ③ 在视图中使用v-指令名来调
<body>
<div id="app">
<input type="text" v-focus>
</div>
<script src="vuejs-2.5.16.js"></script>
<script>
Vue.directive('focus', {
inserted(el) {
el.focus()
}
});
var vm = new Vue({
el: '#app',
data: {},
methods: {}
});
</script>
</body>
局部指令(某一板块适用)
定义: ?????在vue实例中定义的指令是局部指令器;定义方法是:directives:{指令名: {inserted(el){ } } }key就是指令名
具体步骤: ?????①在vue实例中使用实例directives:{指令名: {inserted(el){ } } }(注意标点符号) ?????②在函数中实现具体的指令操作,function(el) ;el 是指当前过滤器的调用者 被处理的数据 自带参数 ?????③在视图中使用自定义指令,指令不带属性值
<body>
<div id="app">
<input type="text" v-focus>
</div>
<script src="vuejs-2.5.16.js"></script>
<script>
var vm = new Vue({
el: '#app',
data: {},
directives: {
focus: {
inserted(el) {
el.focus()
}
}
},
methods: {}
});
</script>
</body>
|