「这是我参与2022首次更文挑战的第18天，活动详情查看：2022首次更文挑战」。
过滤器
过滤器是什么?
过滤器: 用于处理数据,但是并不会改变原本数据的一种处理方式
创建过滤器:
- 全局过滤器: Vue.filter(过滤器名字,函数)
Vue.filter('toDollar',val => '$' + val)
- 局部过滤器:
let obj = {
el:'#app',
filter:{
toFixed (val,num = 2){
return val.tofixed(num)
},
toRMB(val){
return '￥' + val
}
}
}
let vm = new Vue(obj);
使用过滤器
{{1.22222 | toFixed | toRMB}} <br>
{{1.22222 | toFixed(3)}} <br>
{{1.22222 | toFixed | toRMB}} <br>
示例代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
{{1.22222 | toFixed | toRMB}} <br>
{{1.22222 | toFixed(3)}} <br>
{{1.22222 | toFixed | toRMB}} <br>
<!-- | 称为管道符，管道符会把其前面的值传给过滤器函数的第一个参数-->
<!--过滤器可以连续使用，后面过滤器的第一个参数是前面过滤器处理后的结果 -->
</div>
<script src="vue.js"></script>
<script>
// 过滤器：用于处理数据，但是并不会改变原来的数据的一种处理方式；
// 注册全局过滤器：这种过滤器在任何地方都能用
// Vue.filter(过滤器名字, 函数)
Vue.filter('toDollar', val => '$' + val);
// 局部过滤器：只能在当前组件可以使用
let vm = new Vue({
el: '#app',
filters: {
toFixed (val, num = 2) {
// 返回一个保留 num 位的数字
return val.toFixed(num);
},
toRMB(val) {
return '￥' + val;
}
}
})
</script>
</body>
</html>
自定义指令
自定义指令可以给元素增加一些特殊的功能；以拖拽为例
代码实例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#app div {
position: absolute;
width: 100px;
height: 100px;
background: red;
-webkit-user-select: none;
}
#app div:nth-child(2) {
top: 200px
}
</style>
</head>
<body>
<div id="app">
<div v-drag>1</div>
<div v-drag>2</div>
</div>
<script src="vue.js"></script>
<script>
let vm = new Vue({
el: '#app',
directives: {
// 对象中存储的自定义指令
drag: {
inserted(el) {
// 这个函数定义了指令的具体行为 第一个参数是使用这个元素的元素
el.onmousedown = function (e) {
this.startX = e.pageX - this.offsetLeft;
this.startY = e.pageY - this.offsetTop;
document.onmousemove = function (e) {
el.style.left = e.pageX - el.startX + 'px';
el.style.top = e.pageY - el.startY + 'px';
};
document.onmouseup = function () {
document.onmousemove = document.onmouseup = null;
}
}
}
}
}
})
</script>
</body>
</html>
