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

最新推荐文章于 2024-04-17 12:56:28 发布

Ednburgh-

最新推荐文章于 2024-04-17 12:56:28 发布

阅读量441

点赞数 1

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/m0_71345904/article/details/126287993

版权

1，局部过滤器

1.1定义：

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

1.2案例

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

html代码
<body>
    <div class="app">

        <h3>原形态：{{str}}</h3>
        <h3>转大写：{{str | toUpper(1)}}</h3>
        <h3>转小写：{{str | toUpper(2)}}</h3>
        <HR>
        </HR>

    </div>

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案例

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

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./vue.js"></script>
</head>

<body>
    <div class="app">

        <h3>原形态：{{str}}</h3>
        <h3>转大写：{{str | toUpper(1)}}</h3>
        <h3>转小写：{{str | toUpper(2)}}</h3>
        <HR>
        </HR>

    </div>
    <div class="app2">

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


    </div>
</body>
<script>
    Vue.filter('toUpper', function (value, flag = 1) {
        if (flag == 1) {
            return value.toUpperCase()//字符串转大写
        } else {
            return value.toLowerCase()//字符串转小写
        }
    }

    );
    Vue.filter('mySlice', function (value) {
        return value.slice(0, 4)
    })
    //全局过滤器
    new Vue({
        el: '.app',
        data() {
            return {
                str: 'aBaDE'
            }
        },
        filters: {
            toUpper(value, flag = 1) {
                if (flag ==1) {
                    return value.toUpperCase()//转大写
                } else {
                    return value.toLowerCase()
                }
            }
        }
        // filters:{    局部过滤器
        //     toUpper(value,flag=1){
        //         if(flag==1){
        //             return value.toUpperCase()//字符串转大写
        //         }else{
        //             return value.toLowerCase()//字符串转小写
        //         }

        //     }
        // }
    });

    new Vue({
        el: '.app2',
        data() {
            return {
                str2: 'qweYYY'
            }
        }
    })

</script>

</html>

3.自定义指令

3.1定义：

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

3.2案例

实现数字放大10倍

html代码
<body>
	<div class="app">
       <h3>原数据：{{num}}</h3>
		放大10倍数据：<h2 v-big="num"></h2>
	<input type="text" v-Myfocus="num">
	<button @click="num++">点我+1</button>


	</div>
</body>

js代码
<script>
			Vue.config.productionTip = false;
	        Vue.directive("myfocus1",{
				//一上来绑定的时候
				 bind(element,binding){
					 element.value = binding.value*10;//绑定的值
					  element.focus();
				 },
				 //当元素插入页面的使用调用
				 inserted(element,binding){
					  element.focus();
				 },
				 //更新的时候
				 update(element,binding){
					  element.value = binding.value*10;//绑定的值
				 }
			})
			new Vue({
				el:"#root",
				data:{
					num:10,
				},
				directives:{
					//绑定和更新时调用
					big(element,binding){
						// console.log("指令名称：",binding.name);
						// console.log("绑定的名称或者表达式",binding.expression);
						// console.log("指令的参数",binding.arg);
						element.innerText = binding.value*10;//绑定的值
					},
					myfocus:{
						//一上来绑定的时候
						 bind(element,binding){
							 element.value = binding.value*10;//绑定的值
							  element.focus();
						 },
						 //当元素插入页面的使用调用
						 inserted(element,binding){
							  element.focus();
						 },
						 //更新的时候
						 update(element,binding){
							  element.value = binding.value*10;//绑定的值
						 }
					}
				}
			})
		</script>
	</body>
</html>

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