Vue中过滤器和自定义指令详解

目录

1，局部过滤器

1.1定义：

1.2案例

 2，全局过滤器

2.1定义：

2.2案例

 3.自定义指令

3.1定义：

3.2案例

 3.3自定义指令全局写法

---

1，局部过滤器

1.1定义：

Vue.js 允许你自定义过滤器，可被用于一些常见的文本格式化。过滤器可以用在两个地方：双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持)。过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符号指示：。需要用到关键配置项filters

1.2案例

实现一个不规则字母，1，全部变成大写,2，全部变成小写。

html代码

    


        
原形态：{{str}}
        
转大写：{{str | toUpper(1)}}
        
转小写：{{str | toUpper(2)}}
        

        

    

js代码
new Vue({
        el: '.app',
        data() {
            return {
                str: 'aBaDE'
            }
        },
        filters: {
            toUpper(value, flag = 1) {
                if (flag ==1) {
                    return value.toUpperCase()//转大写
                } else {
                    return value.toLowerCase()
                }
            }
        }

 2，全局过滤器

2.1定义：

在全局中格式化文件，全局组件都可以公用，是一种传递参数，串联的回调。

2.2案例

实现前四个字母转变大小写

    
    
    
    
    



    


        
原形态：{{str}}
        
转大写：{{str | toUpper(1)}}
        
转小写：{{str | toUpper(2)}}
        

        

    
    


        
原形态：{{str2}}
        
截取前四位并转大写：{{str2 | toUpper(1) | mySlice}}
        
截取前四位并转小写：{{str2 | toUpper(2) | mySlice}}


    

 3.自定义指令

3.1定义：

自定义指令，顾名思义，就是我们使用者自己创建指令，如同vue给我们内置好的指令如v-model,v-on,v-band一样。我们自定义创建，然后去操作DOM元素。

3.2案例

实现数字放大10倍

html代码

	

       
原数据：{{num}}
		放大10倍数据：

	
	点我+1


	

js代码

	

 3.3自定义指令全局写法

	Vue.directive('Myfocus',{
			bind(element, binding) {
				element.value = binding.value * 10
			},
			//元素插入页面的时候
			inserted(element, binding) {
				element.focus()
			},
			update(element, binding) {
				element.value = binding.value * 10
			},

	})

注意：

1，自定义指令在什么时候去调用，1，当指令和元素绑定成功的时候（一上来）   2，当指令所在模板重新解析的时候。

2，指令分为创建，绑定，使用，三个步骤。自定义指令创建完整写法应该是对象键值对形式，分为绑定时，元素插入页面时，页面更新时。