vue过滤器

index.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <div>
        <input type="text" v-model="length"/>
        {{length | meter}}
    </div>
    <hr>
    <div>
        <input type="text" v-model="price"/>
        {{price | currency('USD')}}
    </div>
</div>
<script src="../lib/vue.js"></script>
<script src="./js/main.js"></script>
</body>
</html>

main.js

Vue.filter('meter', function(val, unit){
    val = val || 0;
    unit = unit || 'm';
    return (val/1000).toFixed(2) + unit;
})

Vue.filter('currency', function(val, unit){
    val = val || 0;
    unit = unit || ""
    return val+unit;
})

new Vue({
    el: '#app',
    data: {
        price: 10,
        length: 10
    }
})
<div id="app">
    <p>{{msg | upperCase(true)}}</p>
</div>
new Vue({
    el: '#app',
    data: {
        msg: "hello world"
    },
    filters: {
        upperCase: function(val, isFirstUpper){
            val = val.toString();
            if(isFirstUpper){
                return val.charAt(0).toUpperCase() + val.slice(1);
            }else{
                return val.toUpperCase();
            }
        }
    }
});
<div v-bind:title = "msg | firstUpper">{{msg | firstUpper}}</div>
new Vue({
    el: '#app',
    data: {
        msg: "hello world"
    },
    filters: {
        firstUpper: function(val){
            var arr = val.split(" ");
            var newArr = arr.map(function(value){
                return value.charAt(0).toUpperCase() + value.slice(1);
            });
            return newArr.join(" ");
        }
    }
});
阅读更多
上一篇vue组件通信之任意级组件之间的通信
下一篇vue自定义指令-基础配置
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

关闭
关闭