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,








阅读更多
想对作者说点什么?

博主推荐

换一批

没有更多推荐了,返回首页