過濾器

時間 2019-11-16

標籤過濾器简体版

原文原文鏈接

　　Vue.js 容許你自定義過濾器，可被用於一些常見的文本格式化。javascript

　　過濾器做用：雙花括號插值和 v-bind 表達式 (後者從 2.1.0+ 開始支持)。html

　　過濾器使用：過濾器應該被添加在 JavaScript 表達式的尾部，由「管道」符號指示：vue

<!-- 在雙花括號中 -->
{{ message | capitalize }}

<!-- 在 `v-bind` 中 -->
<div v-bind:id="rawId | formatId"></div>

1、局部過濾器的使用

　　在一個組件中定義局部(本地)過濾器：Vue.filters()。java

<body>
<div id="app">
    <input type="text" v-model="price">   <!--v-model雙向綁定-->
    <h3>{{price | currentPrice}}</h3>  <!--2.使用過濾器：currentPrice是過濾器的名字-->
</div>
<script type="text/javascript" src="./vue.js"></script>
<script type="text/javascript">

    new Vue({
        el: '#app',
        data() {
            return {
                price:0    // 默認是0
            }
        },
        // 局部過濾器：1.在當前組件中聲明過濾器
        filters: {   // Vue實例中聲明，是一個局部過濾器
            currentPrice:function (value) {
                console.log(value);
                return '$' + value;   // 過濾器默認在前面添加$
            }
        }
    })
</script>
</body>

　　顯示效果以下所示：api

　　在這個例子中，currentPrice被定義爲接收單個參數的過濾器函數，表達式 price 的值將做爲參數傳入到函數中。app

2、全局過濾器的使用

　　在建立Vue實例前定義全局過濾器：Vue.filter()。第一個參數是過濾器的名字，第二個參數是執行的操做。函數

<body>
<div id="app">
    <input type="text" v-model="price">   <!--v-model雙向綁定-->
    <h3>{{price | currentPrice}}</h3>
    <h4>{{msg | reverse}}</h4> <!--2.使用全局過濾器-->
</div>
<script type="text/javascript" src="./vue.js"></script>
<script type="text/javascript">
    // 1.聲明全局的過濾器
    Vue.filter('reverse', function (value) {
        return value.split('').reverse().join('')  // 經過空格分隔和合並
    });

    new Vue({
        el: '#app',
        data() {
            return {
                price:0,    // 默認是0
                msg:"hello luffy"
            }
        },
        // 局部過濾器：在當前組件中聲明過濾器
        filters: {   // Vue實例中聲明，是一個局部過濾器
            currentPrice:function (value) {
                console.log(value);
                return '$' + value;   // 過濾器默認在前面添加$
            }
        }
    })
</script>
</body>

　　顯示效果以下所示：spa

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。