标签：function --- Vue return val value filter unit

官网：https://cn.vuejs.org/v2/api/#filters

　　　https://cn.vuejs.org/v2/api/#Vue-filter

分为全局过滤器和局部过滤器

局部：

　　main.js

new Vue({
    el:'#app',
    data:{
        price:10,
        length:2,
        data:''
    },
    methods:{
        
    },
    components:{
        
    },
    filters:{
        capitalize:function(value){
            
            if(!value){
                return ''
            }
            value=value.toString()
            return    value.charAt(0).toUpperCase()+value.substring(1)
        },
        capitalizeLater:function(value){
            if(!value){
                return ''
            }
            value=value.toString()
            return    value.charAt(0)+value.charAt(1).toUpperCase()+value.substring(2)
        }
    }
})

index.html

<div id="app">
            
            <input v-model="data"/>{{ data | capitalize | capitalizeLater}}
            
        </div>
            <script src="js/vue.js"></script>
            <script src="js/main.js"></script>
</div>

第一个过滤器 capitalize 第二个过滤器 capitalizeLater，第一个字母和第二个字母都被转为大写

 

 

 

全局：

　　index.html

过滤器传递参数

<div id="app">
            <input v-model="price">{{price | currencyFilter()}}<br />
            <input v-model="price">{{price | currencyFilter('元')}}
        
            <hr />
            <input v-model="length"/>{{length | meter()}}<br />
            <input v-model="length"/>{{length | meter('m')}}
            <hr />
            
            
            <input v-model="data"/>{{ data | capitalize | capitalizeLater}}
            
</div>

<script src="js/vue.js"></script>
<script src="js/main.js"></script>

main.js

Vue.filter('currencyFilter',function(val,unit){
    val =val || 0; 
//存在则使用unit，否则使用'USD'
    unit=unit || 'USD';
    return val+unit;
})

Vue.filter('meter',function(val,unit){
    val =val || 0; 
    if('m'==unit){
        return (parseFloat(val)).toFixed(2)+unit;
    }else{
        return (val*1000).toFixed(2)+'mm';
    }
    
})

new Vue({
    el:'#app',
    data:{
        price:10,
        length:2,
        data:''
    },
    methods:{
        
    },
    components:{
        
    },
    filters:{
        capitalize:function(value){
            
            if(!value){
                return ''
            }
            value=value.toString()
            return    value.charAt(0).toUpperCase()+value.substring(1)
        },
        capitalizeLater:function(value){
            if(!value){
                return ''
            }
            value=value.toString()
            return    value.charAt(0)+value.charAt(1).toUpperCase()+value.substring(2)
        }
    }
})

 

标签：function,---,Vue,return,val,value,filter,unit
来源： https://www.cnblogs.com/crazy-lc/p/15087204.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。