过滤器

作者: 冰点雨 | 来源:发表于2022-03-16 10:25 被阅读0次

VUE过滤器和计算属性
自定义过滤器的封装
vue的过滤器及计算属性
2018-09-18 vue初学六(过滤器:filter(fil
过滤器
六、过滤器的使用 ------ 2020-05-07
过滤器和计算属性
Vue的节点
Vue进阶（1）
不锈钢锥形过滤器@管道锥形过滤器@冲孔进水口过滤器

定义：对要显示的数据进行特定格式化后再显示（适用于一些简单逻辑的处理）
语法：
1.注册过滤器： Vue.filter(name,callback) 或 new Vue(filter:{})
2.使用过滤器：{{xxx | 过滤器名}} 或 v-bind:属性 = ”xxx | 过滤器名“
备注：
1.过滤器也可以接收额外参数，多个过滤器也可以串联
2.并没有改变原本的数据，是产生新的对应的数据

<body>
      <h2>显示格式化后的时间</h2>
      <!-- 计算属性实现 -->
      <h3>现在是: {{fmtTime}}</h3>
      <!-- methods实现 -->
      <h3>现在是: {{getFmtTime()}}</h3>
      <!-- 过滤器实现 -->
      <h3>现在是: {{time | timeFormatter}}</h3>
      <!-- 过滤器实现(传参) -->
      <h3>现在是: {{time | timeFormatter('YYYY-MM-DD')}}</h3>

      <h3>现在是: {{time | timeFormatter('YYYY-MM-DD') | mySlice()}}</h3>

      <h3  :x="msg | mySlice">你好时间世界</h3>
    </div>


    <div id="root2">
      <h2>{{name | mySlice}}</h2>
    </div>

    <script type="text/javascript">
        Vue.config.productionTip = false //阻止Vue在启动时生成生产提示
        //全局过滤器
        Vue.filter('mySlice',function(value){
          return value.slice(0, 4)
        })

        const vm = new Vue({
            el: "#root",
            data: {
                time:1621561377603,//时间戳
                msg:'你好，世界啊'
            },
            computed:{
              fmtTime(){
                return dayjs(this.time).format('YYYY-MM-DD HH:mm:ss')
              }
            },
            methods: {
              getFmtTime(){
                return dayjs(this.time).format('YYYY-MM-DD HH:mm:ss')
              }
            },
            //局部过滤器
            filters:{
              timeFormatter(value,format= 'YYYY-MM-DD HH:mm:ss'){
                return dayjs(value).format(format)
              }
            }
        })
        new Vue({
          el: "#root2",
          data: {
            name: 'hello  world'
          },
        })
    </script>
</body>