zoukankan      html  css  js  c++  java
  • Vue 过滤器入门

    • Vue 允许自定义过滤器,可被用于一些常见的文本格式化

    • 过滤器可以用在两个地方:双花括号插值和 v-bind 表达式

    • 过滤器应该被添加在JavaScript表达式的尾部,由“管道”符号指示

    • 支持级联操作

    • 过滤器不改变真正的data,而只是改变渲染的结果,并返回过滤后的版本

    • 全局注册时是filter,没有s的;而局部过滤器是filters,是有s的

     <div id="app">
        <input type="text" v-model='msg'>
          <!-- upper 被定义为接收单个参数的过滤器函数,表达式  msg  的值将作为参数传入到函数中 -->
        <div>{{msg | upper}}</div>
        <!--  
          支持级联操作
          upper  被定义为接收单个参数的过滤器函数,表达式msg 的值将作为参数传入到函数中。
    	  然后继续调用同样被定义为接收单个参数的过滤器 lower ,将upper 的结果传递到lower中
     	-->
        <div>{{msg | upper | lower}}</div>
        <div :abc='msg | upper'>测试数据</div>
      </div>
    
    <script type="text/javascript">
       //  lower  为全局过滤器     
       Vue.filter('lower', function(val) {
          return val.charAt(0).toLowerCase() + val.slice(1);
        });
        var vm = new Vue({
          el: '#app',
          data: {
            msg: ''
          },
           //filters  属性 定义 和 data 已经 methods 平级 
           //  定义filters 中的过滤器为局部过滤器 
          filters: {
            //   upper  自定义的过滤器名字 
            //    upper 被定义为接收单个参数的过滤器函数,表达式  msg  的值将作为参数传入到函数中
            upper: function(val) {
             //  过滤器中一定要有返回值 这样外界使用过滤器的时候才能拿到结果
              return val.charAt(0).toUpperCase() + val.slice(1);
            }
          }
        });
      </script>
    

      

      过滤器中传递参数

        <div id="box">
            <!--
    			filterA 被定义为接收三个参数的过滤器函数。
      			其中 message 的值作为第一个参数,
    			普通字符串 'arg1' 作为第二个参数,表达式 arg2 的值作为第三个参数。
    		-->
            {{ message | filterA('arg1', 'arg2') }}
        </div>
        <script type="text/javascript">
            // 在过滤器中 第一个参数 对应的是  管道符前面的数据   n  此时对应 message
            // 第2个参数  a 对应 实参  arg1 字符串
            // 第3个参数  b 对应 实参  arg2 字符串
            Vue.filter('filterA',function(n,a,b){
                if(n<10){
                    return n+a;
                }else{
                    return n+b;
                }
            });
            
            new Vue({
                el:"#box",
                data:{
                    message: "---msg---"
                }
            })
    
        </script>
    

      

  • 相关阅读:
    Spring基础知识
    Hibernate基础知识
    Struts2基础知识
    在eclipse里头用checkstyle检查项目出现 File contains tab characters (this is the first instance)原因
    java后台获取cookie里面值得方法
    ckplayer 中的style.swf 中的 style.xml 中的修改方法
    java hql case when 的用法
    Windows下Mongodb安装及配置
    Mongodb中经常出现的错误(汇总)child process failed, exited with error number
    Mac 安装mongodb
  • 原文地址:https://www.cnblogs.com/coder-zyc/p/11927522.html
Copyright © 2011-2022 走看看