Vue入门-自定义过滤器-蒲公英云

Vue入门-自定义过滤器

过滤器介绍

Vue.js 允许你自定义过滤器，可被用于一些常见的文本格式化。

过滤器可以用在两个地方：双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持)。

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

代码参考

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>自定义过滤器</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
    <div id="app">
        <h1>价格: {
   {price | currency('¥',2)}}</h1>
        <p>{
   {str | capital}}</p>
    </div>
</body>
</html>
<script>
    // 自定义全局过滤器,第二个参数是函数
    // 全局过滤器，本过滤器功能：添加货币符号，保留两位小数
    Vue.filter('currency', function (val, arg1, arg2) {
        // 输出的结果为: |前面的数字
        console.log(val, arg1, arg2);
        // toFixed()方法可把 Number 四舍五入为指定小数位数的数字。
        return arg1 + val.toFixed(arg2);
    });
    // 注册局部过滤器
    new Vue({
        el: '#app',
        data: {
            price: 12.345,
            str: 'hello'
        },
        // 局部过滤器，本过滤器功能：实现字符的首字符大写
        filters: {
            capital: function (v) {
                // 实现效果: 首字母大写
                // 具体做法: 字符串下标为0的字符,转化为大写;从下标为1的位置开始截取,截取后面所有的字符;最后,进行拼接.
                return v[0].toUpperCase() + v.slice(1);
            }
        }
    });
</script>