vue filters 是什么？怎么使用？

全栈程序员站长

发布于 2022-08-31 03:06:52

45600

代码可运行

文章被收录于专栏：全栈程序员必看全栈程序员必看

运行总次数：0

代码可运行

大家好，又见面了，我是你们的朋友全栈君。

vue filters 是什么？

首先：filter翻译成中文是过滤器的意思。而在Vue中作用其实就是对字段进行预处理

怎么使用呢？

就用一个小Demo,讲解一下！目的：对字段进行处理，打印出“Hello world!!!” 首先,打印出“Helle”

<template>
	<view>
		 {
  
  {demo}}
	</view>
</template>

<script>
	export default {
		data() {
			return {
				demo: 'Hello'
			}
		},
		onLoad() {

		},
		methods: {

		}
	}
</script>

<style>
	 
</style>

结果在页面上打印出了：

接下来，添加filters，把“world”添加上去：

filters:{
	sayHello(demo){
		return demo+" world!!!"
	}
},

最后调用filters方法：

{
  
  {demo | sayHello}}

页面上就打印出我们想要的“Hello world!!!”

实现很easy！

那么什么情况下会用到呢？

如果像demo这样使用，有点多此一举的感觉！！（确实）实际项目中，常常会遇到这种array，如:

userArray: [
	{name:"张三",gender:1},
	{name:"李四",gender:2},
	{name:"王五",gender:0},
	{name:"赵六",gender:2}
]

这里的gender,需要按1：男，2：女，0：未知显示在最终的页面上。如果不用filters,需要循环处理下userArray:

页面代码：

<view v-for="(item,index) in userArray" v-bind:key="index">
	姓名:{
  
  {item.name}} 性别：{
  
  {item.gender}}
 </view>

js代码

this.userArray.forEach(item=>{
	switch(item.gender){
		case 0:
			item.gender = "未知"
			break
		case 1:
			item.gender = "男"
			break
		case 2:
			item.gender = "女"
			break
		default:
			item.gender = "未知"
			break
	}  
})

而用filters,这样处理：页面代码：

<view v-for="(item,index) in userArray" v-bind:key="index">
			 姓名:{
  
  {item.name }} 性别：{
  
  {item.gender | genderZH}}
</view>

js代码：

filters:{
	genderZH(gender){
		switch(gender){
			case 0:
				gender = "未知"
				break
			case 1:
				gender = "男"
				break
			case 2:
				gender = "女"
				break
			default:
				gender = "未知"
				break
		} 
		return gender
	}
}

最终的效果：

好像这么做，区别也不是很大啊？那么，如果现在有studentArray，teacherArray 两个array呢？或者更多呢？如果不用filters，是不是有多少个array就得写多少个forEach方法而用filters,多个array跟一个array是一样的。这里就不示例了，感兴趣的可以自己动手写一写！完整代码如下：

<template>
	<view>
		 <!-- 不用filters -->
		 <!-- <view v-for="(item,index) in userArray" v-bind:key="index">
			 姓名:{
  
  {item.name}} 性别：{
  
  {item.gender}}
		 </view> -->
		 <view v-for="(item,index) in userArray" v-bind:key="index">
		 			 姓名:{
  
  {item.name }} 性别：{
  
  {item.gender | genderZH}}
		 </view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userArray: [
					{name:"张三",gender:1},
					{name:"李四",gender:2},
					{name:"王五",gender:0},
					{name:"赵六",gender:2}
				]
			}
		},
		filters:{
			genderZH(gender){
				switch(gender){
					case 0:
						gender = "未知"
						break
					case 1:
						gender = "男"
						break
					case 2:
						gender = "女"
						break
					default:
						gender = "未知"
						break
				} 
				return gender
			}
		},
		onLoad() {
			//不用filters
			// this.userArray.forEach(item=>{
			// 	switch(item.gender){
			// 		case 0:
			// 			item.gender = "未知"
			// 			break
			// 		case 1:
			// 			item.gender = "男"
			// 			break
			// 		case 2:
			// 			item.gender = "女"
			// 			break
			// 		default:
			// 			item.gender = "未知"
			// 			break
			// 	}  
			// }) 
		},
		methods: {

		}
	}
</script>

<style>
	 
</style>