Vue--過濾器limitBy fiterBy orderBy
阿新 • • 發佈:2018-11-02
1.1字母操作
<li> 1.1字母操作 <ul> <li> 1.capitalize(首字母大寫) <p>deng:{{'deng' | capitalize}}</p> </li> <li> 2.uppercase(字母大寫) <p>deng:{{'deng' | uppercase}}</p> </li> <li> 3.lowercase(字母小寫) <p>DENG:{{'DENG' | lowercase}}</p> </li> </ul> </li>
1.2 json過濾器
<li>
1.2json過濾器
<p>{{did | json 4}}</p>
</li>
did: {'name':'ddfe','age':3},
1.3限制
1.3.1 偏移過濾器 limitBy
items: [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15],
<li> 1.limitBy(限制陣列)<br> 顯示開始的十個元素<span v-for="item in items | limitBy 10">{{item}}</span><br> 顯示從第五個開始的十個元素<span v-for="item in items | limitBy 10 5">{{item}}</span> </li>
1.3.2 匹配過濾器 fiterBy
<li>
2.filterBy(匹配)
<input v-model="names">
<br>
<span v-for="user in users | filterBy names in 'name'">{{user.name}}<br/></span>
</li>
names: '', users: [{name:'Bruce'},{name:'Chuck'},{name:'jackie'}],
1.3.3 排序過濾器 orderBy
<li>
3.orderBy(排序) <br>
<span v-for="user in users2 | orderBy 'age'">
{{user.firstName}}, {{user.age}}, {{user.lastName}}<br>
</span>
</li>
users2: [{firstName:'c',lastName:'Bruce',age:1},{firstName:'b',lastName:'Chuck',age:2},{firstName:'a',lastName:'jackie',age:3}],
1.4currency過濾器
<li>
1.4currency過濾器
<span>{{amount | currency '$' 3}}</span>
</li>
amount: 12345,