vue 自定义指令,过滤器

最新推荐文章于 2022-06-23 22:56:59 发布

子非鱼emma

最新推荐文章于 2022-06-23 22:56:59 发布

阅读量99

点赞数

分类专栏： VUE 文章标签： vue

本文链接：https://blog.csdn.net/qq_38998319/article/details/117486891

版权

VUE 专栏收录该内容

28 篇文章 0 订阅

订阅专栏

1.数组复习

<script type="text/javascript">
	/*
		循环出10-100的10个数
	*/

	//声明一个空数组
	let arr = [];
	for(var i=0;i<10;i++){
		arr[i] = Math.floor((Math.random()*90)+10);
	}
	//console.log(arr);
	//冒泡排序
	for(var i = 0;i<arr.length;i++){
		for(var i2 = i+1;i2<arr.length;i2++){
			if(arr[i]>arr[i2]){
				var tmp = arr[i];
				arr[i] = arr[i2];
				arr[i2] = tmp;
			}
		}
	}
	console.log(arr);
</script>

2.过滤器

<body>
	<div id="app">
		<!-- 2021/06/02 => 2021-06-02 -->
		<!-- 使用过滤器  要过滤的值 | 过滤器方法 -->
		<!-- 如果有多个过滤器 只需要把 前边的返回结果作为要过滤的值 -->
		{{time | f1 | f2}}
	</div>
</body>
<script type="text/javascript">
	new Vue({
		el:"#app",
		data:{
			time:"2021/06/02"
		},
		methods:{

		},
		filters:{
			//在过滤器中声明方法
			//过滤器中形参存储的是要过滤的值
			f1(val){
				//console.log(val);
				//var newTime = val.replace("/","-");
				//split()  把字符串分割成数组   / => [2021,06,02]
				//将改变后的值,返回即可
				var arr = val.split("/");
				//console.log(arr);
				//return newTime;
				//join
				var str = arr.join('-');
				//console.log(str);
				return str;

			},
			f2(val){
				//console.log(val);
				return '当前的日期是:'+val;
			}
		}
	})
</script>

<body>
	<div id="app">
		<!-- 
			指令: 类似于 js中的函数
				函数:
					1.系统函数
					2.自定义函数
			vuejs中的指令语法是  v-xxx 在使用的时候可以直接使用 
				<元素 v-xxx></元素>

			
			使用自定义指令需要写 v-自定义的指令名
			自定义指令的指令值 只能是变量 或 布尔值
		 -->
		 <p v-demo="word">这是一个p标签</p>
		 <button @click="change()">变</button>
	</div>
</body>
<script type="text/javascript">
	new Vue({
		el:"#app",
		data:{
			word:'abc'
		},
		methods:{
			change(){
				this.word = 'def';
			}
		},
		//自定义指令的声明
		directives:{
			//定义自定义指令名
			//demo就是自定义的指令名 不需要要使用v-xxx声明
			'demo':{
				//钩子函数:在满足某种条件时,会自动触发的函数,就是钩子函数
				//bind函数,什么时候会调用? 在使用自定义指令的时候会自动调用
				bind(el,binding){
					/*
						参数1:绑定该自定义指令的元素标签
						参数2:
							name   'demo'  自定义指令名
							rawName: "v-demo" 指令
							value: "abc"  自定义指令的指令值
					*/
					console.log(binding);
					//console.log('执行了');
				},
				//钩子函数
				//在更改自定义指令值的时候会自定调用
				update(el,binding){
					/*
						参数1:绑定该自定义指令的元素标签
						参数2:
							name   'demo'  自定义指令名
							rawName: "v-demo" 指令
							value: "def"  更改后的值
					*/
					console.log('update方法');
					console.log(binding);
				}
			}
		}
	})

</script>

<body>
	<div id="app">
		<button @click="fun()">走你</button>
		<p v-demo="bool">这就是一个屁</p>
	</div>
</body>
<script type="text/javascript">
	/*
		实现一个v-show指令相同的功能
			按钮(点击)
			元素(显示|隐藏)
			找元素.display = none
			找元素.display = block
	*/
	new Vue({
		el:"#app",
		data:{
			bool:true
		},
		methods:{
			fun(){
				this.bool = !this.bool;
			}
		},
		//自定义指令的声明
		directives:{
			'demo':{
				bind(el,binding){


				},
				update(el,binding){
					//console.log(binding);
					if(binding.value){
						el.style.display = 'block';
					}else{
						el.style.display = 'none';
					}
					
				}
			}
		}
	})

</script>

子非鱼emma

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue 自定义指令,过滤器

1.数组复习<script type="text/javascript"> /* 循环出10-100的10个数 */ //声明一个空数组 let arr = []; for(var i=0;i<10;i++){ arr[i] = Math.floor((Math.random()*90)+10); } //console.log(arr); //冒泡排序 for(var i = 0;i<arr.length;i++){ for(var i2 =
复制链接

扫一扫

专栏目录