vue過濾器在v2.0版本用法

本文轉載自查看原文 2017-07-20 11:19 1487 JavaScript

vue 1.x 的寫法在 vue 2.x版本已經廢除

vue 1.x 寫法

 1 <body>
 2 <div id="app">
 3     {{message | capitalize | ...}}
 4 </div>
 5 <script>
 6     new Vue({
 7         el:'#app',
 8         data:{
 9             
10             message:"message"
11         }
12     })
13 </script>
14 </body>

上面代碼輸出："Message"(首字母大寫)

vue 2.x 寫法（需要自己自定義）

 1     <div id="app">
 2         {{message | capitalize}}
 3     </div>
 4 
 5     //注冊全局過濾器
 6     Vue.filter('capitalize', function(value) {
 7         if (!value) { return ''}
 8         value = value.toString()
 9         //返回處理后的值
10         return value.charAt(0).toUpperCase() + value.slice(1)
11     })
12 
13     var vm = new Vue({
14         el:'#app',
15         data: {
16         　　message: 'message'
17     　　}
18    　}）

關於 filter 在 vue2.x 遇到的一些問題：

 1 // 注冊
 2 Vue.filter('my-filter', function (value) {
 3   // 返回處理后的值
 4 })
 5 // getter，返回已注冊的過濾器
 6 var myFilter = Vue.filter('my-filter')
 7 
 8 
 9 Vue.filter( id, [definition] )
10 
11 參數：
12     {string} id
13     {Function} [definition]

1.function里第一個參數value默認為使用這個過濾器的data對象內的值,第一個參數必須為自身的值，后面可以加任意多的參數。數序顛倒就會出錯。

2.在vue2.0里管道符‘ | '只能用在 mousetache(插值) 和 v-bind 中。

3.“ | ”能將上一個過濾器輸出內容作為下一個過濾器的輸入內容。（<div>{{ content | reverseStr | removeNum }}</div>）

4.在vue2.0里過濾器只能用類似函數的寫法reverseString( ‘I must tell you:')，括號內是參數，不同於vue1.0的用空格后加參數的寫法；

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 vue2.0版本中v-html中過濾器的使用 Vue 2.0的學習筆記：Vue的過濾器 Vue過濾器 Vue - 過濾器 vue過濾器 Vue2.0如何自定義時間過濾器 Vue2.0實現1.0的搜索過濾器功能 Vue2.0自定義過濾器【Vue】v-model里使用filters過濾器 Angular(過濾器基本用法)