Vue 过滤器

最新推荐文章于 2024-10-16 11:23:07 发布

一条代码虫

最新推荐文章于 2024-10-16 11:23:07 发布

阅读量139

点赞数

文章标签：前端

本文链接：https://blog.csdn.net/Alittle_lazy/article/details/125289983

版权

Vue框架针对页面上展示的数据，数据格式可以通过固定的函数进行规范；对展示数据进行格式规范的选项称为过滤器（filter）

基本语法

// 全局过滤器：一旦声明，所有的Vue实例中都可以使用
Vue.filter('过滤器名称', function(val) { 格式处理函数 })

// 局部/私有过滤器：一旦声明，只在当前Vue实例中可以使用
new Vue({
    ...
    filters: {
        '过滤器名称': function(val) {
            格式处理函数
        }
    }
})

代码操作：

<!DOCTYPE html>
<html lang='zh'>
<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>
</head>
<body>
  <div id='app'>
    <p>商品单价：{{ price }}</p>
    <p>商品单价（全局过滤器）：{{ price | priceFilter }}</p>
    <p>商品单价（私有过滤器）：{{ price | pfilter }}</p>
  </div>

  <script src='./vue.js'></script>
  <script>
    // 声明一个全局过滤器
    Vue.filter('priceFilter', function(val) {
      return parseFloat(val).toFixed(2) + "元"
    })
    const app = new Vue({
      el: '#app',
      data: {
        price: 699
      },
      watch: {},
      computed: {},
      methods: {},
      filters: {
        pfilter: function(val) { // 局部/私有过滤器，只能在当前实例范围使用
          return "￥" + parseFloat(val).toFixed(3) + "元"
        }
      }
    })
  </script>
  
</body>
</html>