VUE2.0和3.0过滤器_vue3.0过滤器

在Vue2.0中，过滤器（Filters）是一种用于将数据进行格式化的功能。过滤器是在模板中使用的，可以像管道一样串联多个过滤器，以便对数据进行多次格式化处理。
好的，下面是更详细的示例。

示例1：将数字格式化为货币

假设我们有一个数字，我们想要在模板中将其格式化为货币。我们可以使用过滤器来实现这个功能，如下所示：

<template>
  <div>
    <p>{{ price | currency }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      price: 123.45
    }
  },
  filters: {
    currency(value) {
      return '$' + value.toFixed(2)
    }
  }
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

在上面的示例中，我们定义了一个名为currency的过滤器，该过滤器将数字格式化为货币形式，并添加美元符号。然后我们在模板中使用这个过滤器对price数据进行格式化处理。

示例2：将日期格式化为指定格式

假设我们有一个日期字符串，我们想要在模板中将其格式化为指定的日期格式。我们可以使用过滤器来实现这个功能，如下所示：

<template>
  <div>
    <p>{{ date | formatDate('YYYY-MM-DD') }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      date: '2023-07-14'
    }
  },
  filters: {
    formatDate(value, format) {
      const date = new Date(value)
      const year = date.getFullYear()
      const month = ('0' + (date.getMonth() + 1)).slice(-2)
      const day = ('0' + date.getDate()).slice(-2)
      return format.replace('YYYY', year).replace('MM', month).replace('DD', day)
    }
  }
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

在上面的示例中，我们定义了一个名为formatDate的过滤器，该过滤器将日期字符串格式化为指定的日期格式。然后我们在模板中使用这个过滤器对date数据进行格式化处理，并传递了一个日期格式参数。

示例3：将文本截断为指定长度

假设我们有一段文本，我们想要在模板中将其截断为指定长度，并在结尾添加省略号。我们可以使用过滤器来实现这个功能，如下所示：

<template>
  <div>
    <p>{{ text | truncate(20) }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.'
    }
  },
  filters: {
    truncate(value, length) {
      if (value.length > length) {
        return value.slice(0, length) + '...'
      } else {
        return value
      }
    }
  }
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

在上面的示例中，我们定义了一个名为truncate的过滤器，该过滤器将文本截断为指定长度，并在结尾添加省略号。然后我们在模板中使用这个过滤器对text数据进行格式化处理，并传递了一个长度参数。

总之，Vue 2.0中的过滤器提供了一种方便的数据格式化处理方式，可以在模板中使用，并支持传递参数和串联多个过滤器。不过需要注意的是，在Vue 3.0中已经移除了过滤器这个概念，请使用computed属性和methods属性来实现类似的功能。

Vue 3.0中已经移除了过滤器（Filters）这个概念，取而代之的是更加强大的函数式编程工具——computed和methods。

示例1：将字符串转换为大写

假设我们有一个字符串，我们想要在模板中将其转换为大写字母。我们可以使用computed属性来实现这个功能，如下所示：

<template>
  <div>
    <p>{{ text }}</p>
    <p>{{ uppercaseText }}</p>
  </div>
</template>

<script>
import { computed } from 'vue'

export default {
  setup() {
    const text = 'hello world'

    const uppercaseText = computed(() => {
      return text.toUpperCase()
    })

    return {
      text,
      uppercaseText
    }
  }
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

在上面的示例中，我们使用computed函数创建了一个名为uppercaseText的计算属性，该属性将text字符串转换为大写字母。然后我们在模板中使用这个计算属性来渲染已转换为大写的文本。

示例2：根据条件过滤列表

假设我们有一个包含多个人员信息的列表，我们想要根据条件过滤该列表中的人员信息。我们可以使用computed属性来实现这个功能，如下所示：

<template>
  <div>
    <input v-model="searchQuery" type="text">
    <ul>
      <li v-for="person in filteredList" :key="person.id">
        {{ person.name }} - {{ person.age }} years old
      </li>
    </ul>
  </div>
</template>

<script>
import { ref, computed } from 'vue'

export default {
  setup() {
    const people = ref([
      { id: 1, name: 'John', age: 25 },
      { id: 2, name: 'Jane', age: 30 },
      { id: 3, name: 'Bob', age: 35 },
      { id: 4, name: 'Alice', age: 40 }
    ])

    const searchQuery = ref('')

    const filteredList = computed(() => {
      return people.value.filter(person => {
        return person.name.toLowerCase().indexOf(searchQuery.value.toLowerCase()) !== -1
      })
    })

    return {
      people,
      searchQuery,
      filteredList
    }
  }
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

在上面的示例中，我们使用computed函数创建了一个名为filteredList的计算属性，该属性将people列表根据用户输入的查询字符串进行过滤，然后返回过滤后的新列表。然后我们在模板中使用这个计算属性来渲染已过滤的人员信息。

示例3：格式化日期

假设我们有一个日期字符串，我们想要在模板中将其格式化为指定的日期格式。我们可以使用methods属性来实现这个功能，如下所示：

<template>
  <div>
    <p>{{ date }}</p>
    <p>{{ formatDate() }}</p>
  </div>
</template>

<script>
import { ref } from 'vue'

export default {
  setup() {
    const date = ref('2023-07-14')

    const formatDate = () => {
      const options = { year: 'numeric', month: 'long', day: 'numeric' }
      return new Date(date.value).toLocaleDateString('en-US', options)
    }

    return {
      date,
      formatDate
    }
  }
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

在上面的示例中，我们使用methods属性创建了一个名为formatDate的函数，该函数将date字符串格式化为指定的日期格式。然后我们在模板中使用这个函数来渲染已格式化的日期。

总之，使用computed属性和methods属性可以实现各种数据转换和处理功能，取代了Vue 2.x中的过滤器。