如何换个角度使用VUE过滤器详解

下面就是关于如何换个角度使用VUE过滤器的完整攻略了。

什么是VUE过滤器？

VUE过滤器是一种用于格式化显示内容的机制，在VUE中使用{{ }}语法进行内容绑定时，可以通过管道符“|”来使用过滤器。例如：{{msg | capitalize}}。在这个例子中，capitalize就是一个过滤器。

如何使用VUE过滤器？

在Vue的template模板中使用v-bind指令时，可以通过“|”管道符来链接过滤器，例如：

<div v-bind:class="color | getColor"></div>

这个例子中，color会被getColor过滤器处理，然后返回一个CSS类名的字符串，最终在渲染的HTML div元素中添加class="返回值"的类名。

利用VUE过滤器处理时间格式

假如我们有一个日期时间的字符串，如“2020-10-01 12:30:23”，在网页上显示时，可以通过使用VUE过滤器把它转化成自己想要的格式。

<template>
  <div>{{ datetime | formatDate }}</div>
</template>

<script>
export default {
  data() {
    return {
      datetime: '2020-10-01 12:30:23'
    }
  },
  filters: {
    formatDate: function (value) {
      let date = new Date(value)
      let year = date.getFullYear()
      let month = date.getMonth() + 1
      let day = date.getDate()
      let hour = date.getHours()
      let minute = date.getMinutes()
      let second = date.getSeconds()
      return year + '-' + (month < 10 ? '0' + month : month) + '-' + (day < 10 ? '0' + day : day) + ' ' + (hour < 10 ? '0' + hour : hour) + ':' + (minute < 10 ? '0' + minute : minute) + ':' + (second < 10 ? '0' + second : second)
    }
  }
}
</script>

这里我们定义了一个过滤器，它接收一个字符串类型的日期时间，并把它转化成一个格式为“年-月-日 时:分:秒”的字符串。然后在模板中使用 过滤器即可轻松实现把原始的日期时间字符串进行转换。

利用VUE过滤器处理金额格式

假设我们有一个显示价格的数字，如“1234”，我们希望在网页上显示时，自动添加千位分隔符。可以通过使用VUE过滤器来实现这个需求。

<template>
  <div>{{ price | formatMoney }}</div>
</template>

<script>
export default {
  data() {
    return {
      price: 1234
    }
  },
  filters: {
    formatMoney: function (value) {
      let intPart = parseInt(value).toString()
      let floatPart = '.00'
      let pos = value.toString().indexOf('.')
      if (pos >= 0) {
        floatPart = value.toString().substring(pos)
      }
      let intPartFormat = intPart.replace(/(\d)(?=(\d{3})+$)/g, '$1,')
      return intPartFormat + floatPart;
    }
  }
}
</script>

这里我们定义了一个过滤器，它接收一个数字类型的价格，并在其千位分隔符前面自动添加“,”符号。然后在模板中使用 过滤器即可实现这个需求。

以上就是利用VUE过滤器处理时间格式和金额格式的两个实例，希望可以帮到你。