1. 程式人生 > >Vue--過濾器limitBy fiterBy orderBy

Vue--過濾器limitBy fiterBy orderBy

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,