Vue 过滤器

Posted liea

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Vue 过滤器相关的知识,希望对你有一定的参考价值。

过滤器的作用:

格式化数据,比如将字符串格式化为首字母大写,将日期格式化为指定的格式等。

 自定义过滤器:

    Vue.filter(‘过滤器名称‘, function(value){
    // 过滤器业务逻辑

    })

 过滤器的使用

 <div>{{msg | upper}}</div>
  <div>{{msg | upper | lower}}</div>
  <div v-bind:id=‘id | formatId‘ ></div>

案例:(全局过滤器)

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>
  <div id=‘app‘>
    <div><input type="text" v-model=‘msg‘></div>
    <div>{{msg | upper}}</div>
  </div>

  <script>
    Vue.filter(‘upper‘, function (value) {
      // 过滤器业务逻辑
      // 首字母大写
      return value.charAt(0).toUpperCase() + value.slice(1)
    })
    var vm = new Vue({
      el: ‘#app‘,
      data: {
        msg:‘‘
      },
      methods: {

      }
    })
  </script>
</body>

</html>

 局部过滤器:

只能在当前文件内生效

案例:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>
  <div id=‘app‘>
    <div><input type="text" v-model=‘msg‘></div>
    <div>{{msg | upper}}</div>
  </div>

  <script>
    var vm = new Vue({
      el: ‘#app‘,
      data: {
        msg: ‘‘
      },
      filters: {
        upper: function () {
          // 过滤器业务逻辑
          // 首字母大写
          return value.charAt(0).toUpperCase() + value.slice(1)
        }
      }
    })
  </script>
</body>

</html>

 

 

以上是关于Vue 过滤器的主要内容,如果未能解决你的问题,请参考以下文章

VSCode自定义代码片段——.vue文件的模板

VSCode自定义代码片段(vue主模板)

VSCode自定义代码片段11——vue路由的配置

VSCode自定义代码片段11——vue路由的配置

VSCode自定义代码片段11——vue路由的配置

VSCode自定义代码片段2——.vue文件的模板