gitHub地址:/lily1010/vue_learn/tree/master/lesson05
一 过滤器写法
{{ message | Filter}}
二 Vue自带的过滤器:capitalize
功能:首字母大写
&!DOCTYPE html&
&meta charset="UTF-8"&
&title&Vue自带的过滤器&/title&
&meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /&
&script src="../js/vue.js" type="text/javascript" charset="utf-8"&&/script&
&div class="test"&
{{message | capitalize}}
&script type="text/javascript"&
var myVue = new Vue({
el: ".test",
message: "abc"
上面代码输出:Abc
三 Vue自带的过滤器:uppercase
功能:全部大写
&!DOCTYPE html&
&meta charset="UTF-8"&
&title&Vue自带的过滤器&/title&
&meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /&
&script src="../js/vue.js" type="text/javascript" charset="utf-8"&&/script&
&div class="test"&
{{message | uppercase}}
&script type="text/javascript"&
var myVue = new Vue({
el: ".test",
message: "abc"
上面代码输出:ABC
四 Vue自带的过滤器:uppercase
功能:全部小写
&!DOCTYPE html&
&meta charset="UTF-8"&
&title&Vue自带的过滤器&/title&
&meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /&
&script src="../js/vue.js" type="text/javascript" charset="utf-8"&&/script&
&div class="test"&
{{message | lowercase}}
&script type="text/javascript"&
var myVue = new Vue({
el: ".test",
message: "ABC"
上面代码输出:abc
五 Vue自带的过滤器:currency
功能:输出金钱以及小数点
第一个参数 & &&{String} [货币符号] - 默认值: '$'
第二个参数 & &&{Number} [小数位] - 默认值: 2
&!DOCTYPE html&
&meta charset="UTF-8"&
&title&Vue自带的过滤器&/title&
&meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /&
&script src="../js/vue.js" type="text/javascript" charset="utf-8"&&/script&
&div class="test"&
{{message | currency}} &!--输出$123.47--&
{{message | currency '&' "1"}} &!--输出$123.5--&
&script type="text/javascript"&
var myVue = new Vue({
el: ".test",
message: "123.4673"
六 Vue自带的过滤器:pluralize
功能: 如果只有一个参数，复数形式只是简单地在末尾添加一个 &s&。如果有多个参数，参数被当作一个字符串数组，对应一个、两个、三个&复数词。如果值的个数多于参数的个数，多出的使用最后一个参数。
参数：{String} single, [double, triple, ...
&!DOCTYPE html&
&meta charset="UTF-8"&
&title&Vue自带的过滤器&/title&
&meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /&
&script src="../js/vue.js" type="text/javascript" charset="utf-8"&&/script&
&div class="test"&
{{message}}
{{message | pluralize 'item'}} &!--输出: 1 item--&
&ul v-for="item in lili"&
{{item | pluralize 'item'}} &!--输出: 1
&ul v-for="item in lili"&
{{item | pluralize 'st' 'rd'}} &!--输出: 1
&ul v-for="item in man"&
{{item | pluralize 'item'}} &!--输出: 1
&ul v-for="item in man"&
{{item | pluralize 'st' 'rd'}} &!--输出: 1
&script type="text/javascript"&
var myVue = new Vue({
el: ".test",
message: 1,
lili: [1,2,3],
七 Vue自带的过滤器:debounce
(1)限制： 需在@里面使用
(2)参数:{Number} [wait] - 默认值： 300
(3)功能：包装处理器，让它延迟执行&x&ms， 默认延迟 300ms。包装后的处理器在调用之后至少将延迟&x&ms， 如果在延迟结束前再次调用，延迟时长重置为&x&ms。
&!DOCTYPE html&
&meta charset="UTF-8"&
&title&Vue自带的过滤器&/title&
&meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /&
&script src="../js/vue.js" type="text/javascript" charset="utf-8"&&/script&
&div class="test"&
&button id="btn" @click="disappear | debounce 10000"&点击我,我将10秒后消失&/button&
&script type="text/javascript"&
var myVue = new Vue({
el: ".test",
methods: {
disappear: function () {
document.getElementById("btn").style.display= "none";
八 Vue自带的过滤器:limitBy
(1)限制:需在v-for(即数组)里面使用
(2)两个参数:
第一个参数:{Number} 取得数量
第二个参数:{Number} 偏移量
&!DOCTYPE html&
&meta charset="UTF-8"&
&title&Vue自带的过滤器&/title&
&meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /&
&script src="../js/vue.js" type="text/javascript" charset="utf-8"&&/script&
&div class="test"&
&ul v-for="item in lili | limitBy 10"& &!--输出1 2 3 4 5 6 7 8 9 10--&
&li&{{item}}&/li&
&ul v-for="item in lili | limitBy 10 3"& &!--输出 4 5 6 7 8 9 10 11 12 13--&
&li&{{item}}&/li&
&script type="text/javascript"&
var myVue = new Vue({
el: ".test",
lili: [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15]
九 Vue自带的过滤器:filterBy
(1)限制:需在v-for(即数组)里面使用
(2)三个参数:
第一个参数:&{String | Function} 需要搜索的字符串
第二个参数: in (可选,指定搜寻位置)
第三个参数:&{String} (可选,数组格式)
&!DOCTYPE html&
&meta charset="UTF-8"&
&title&Vue自带的过滤器&/title&
&meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /&
&script src="../js/vue.js" type="text/javascript" charset="utf-8"&&/script&
&div class="test"&
&ul v-for="item in lili | filterBy 'o' "& &!--输出oi oa lo ouo oala--&
&li&{{item}}&/li&
&ul v-for="item in man | filterBy 'l' in 'name' "& &!--输出lily lucy--&
&li&{{item.name}}&/li&
&ul v-for="item in man | filterBy 'l' in 'name' 'dada' "& &!--输出lily+undefined lucy+undefined undefined+lsh--&
&li&{{item.name+"+"+item.dada}}&/li&
&script type="text/javascript"&
var myVue = new Vue({
el: ".test",
lili: ["oi", "oa", "ll", "lo" ,"ouo" ,"kk" ,"oala"],
//此处注意man是数组,不是对象
{name: "lily"},
{name: "lucy"},
{name: "oo"},
{dada: "lsh"},
{dada: "ofg"}
十 Vue自带的过滤器:orderBy
(1)限制:需在v-for(即数组)里面使用
(2)三个参数:
第一个参数: {String | Array&String& | Function}&需要搜索的字符串
第二个参数:&{String} 可选参数&order&决定结果升序（order &= 0）或降序（order & 0）,默认是升序
&!DOCTYPE html&
&meta charset="UTF-8"&
&title&Vue自带的过滤器&/title&
&meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /&
&script src="../js/vue.js" type="text/javascript" charset="utf-8"&&/script&
&div class="test"&
&!--遍历数组--&
&ul v-for="item in lili | orderBy 'o' 1"& &!--输出kk ll oi--&
&li&{{item}}&/li&
&ul v-for="item in lili | orderBy 'o' -1"& &!--输出oi ll kk--&
&li&{{item}}&/li&
&!--遍历含对象的数组--&
&ul v-for="item in man | orderBy 'name' 1"& &!--输出Bruce Chuck Jackie--&
&li&{{item.name}}&/li&
&ul v-for="item in man | orderBy 'name' -1"& &!--输出Jackie Chuck Bruce--&
&li&{{item.name}}&/li&
&!--使用函数排序--&
&ul v-for="item in man | orderBy ageByTen"& &!--输出Bruce Chuck Jackie--&
&li&{{item.name}}&/li&
&script type="text/javascript"&
var myVue = new Vue({
el: ".test",
lili: ["oi", "kk", "ll"],
//此处注意man是数组,不是对象
name: 'Jackie',
name: 'Chuck',
name: 'Bruce',
methods: {
ageByTen: function () {
阅读(...) 评论()课程名称读取中
支付宝支付
由百度开放云提供技术支持
&学院APP&&
扫描微信二维码精彩活动、课程更新抢先知
下载客户端，离线视频任您学
1.&课程介绍
2.&配置和创建项目
3.&项目结构
4.&Vue实例
8.&模板指令之文本
9.&模板指令之属性
10.&模板指令之表达式
11.&双向绑定和过滤器
12.&自定义指令
14.&js操作虚拟Dom
15.&render渲染操作虚拟Dom
16.&数据和逻辑操作虚拟Dom
18.&css和js的引入应用
19.&组件之间的消息传递
20.&http交互和调用restful接口
21.&引入bootstrap
22.&引入jQuery
23.&打包部署
24.&下一课程介绍
加入购物车
【课程类型】技术教程
【难度级别】初级
【适合人群】菜鸟级小白学员
【课程介绍】 Vue.js2.0进阶教程的第一步，主要学习Vue.js的基础语法结构，api使用方式，组件的驱动方式，如何连接数据库等知识。
【课程目标】 了解全新的VUE.JS2.0的基础知识，组件，模板指令，数据绑定，虚拟DOM，连接数据库及其从创建项目到打包部署的全部流程
【课程计划】 配置和创建项目
模板指令文本
模板指令之属性
模板指令之表达式
双向绑定和过滤
自定义指令
事件和事件处理器
打包部署等
全部评价（0）
17课程246333学员
所属机构：
参考知识库
为您推荐课程
讲师：何韬 52课时
讲师：何韬 45课时
讲师：何韬 47课时
讲师：何韬 33课时
讲师：何韬 24课时Sponsered by
一个 Vue.js 的过滤器本质上是一个函数，这个函数会接收一个值，将其处理并返回。过滤器在指令中由一个管道符 (|) 标记，并可以跟随一个或多个参数：
&element directive="expression | filterId [args...]"&&/element&
过滤器必须放置在一个指令的值的最后：
&span v-text="message | capitalize"&&/span&
你也可以用在 mustache 风格的绑定的内部：
&span&{{message | uppercase}}&/span&
可以串联多个过滤器：
&span&{{message | lowercase | reverse}}&/span&
一些过滤器是可以接受参数的。参数用空格分隔开：
&span&{{order | pluralize 'st' 'nd' 'rd' 'th'}}&/span&
&input v-on="keyup: submitForm | key 'enter'"&
纯字符串参数需要用引号包裹。无引号的参数会作为表达式在当前数据作用域内动态计算。在后面讲到自定义过滤器时，我们进一步讨论这些细节。
上述示例的具体用法参见完整的内建过滤器列表。
现在你已经了解了指令和过滤器，接下来我们趁热打铁，看看如何 。在线课堂 - 汇智网