vue.js基础知识篇(4):过滤器、class与style的绑定2
代码下载:网盘
欢迎私信
第一章:过滤器
过滤器是对数据进行处理并返回结果的函数。
1.语法
语法是使用管道符“|”进行连接。过滤器可以接收参数，跟在过滤器后面，带引号的参数被当做字符串处理，不带引号的参数被当做数据属性名处理。
{{message | filterFunction "arg1" arg2 }}
vue.js支持在任何出现表达式的地方添加过滤器。
vue.js支持链式调用，上一个过滤器的输出结果作为下一个过滤器的输入。类似于Linux shell的管道符(|)使用。
<span>{{"ddfe"|capitalize|reverse}}</span>
<!--ddfe->Ddfe->efdD-->
2.内置过滤器
(1)字母操作capitalize、uppercase、lowercase
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>字母操作过滤器</title>
</head>
<body>
<div id="app">
<div>{{"ddfe"|capitalize}}</div>
<div>{{"ddfe"|uppercase}}</div>
<div>{{"DDFE"|lowercase}}</div>
</div>
<!--"ddfe"=>capitalize-->
<script src="js/vue.js"></script>
<!--它以vue对象的形式挂载到window对象上-->
<script>
new Vue({
el:"#app"
})
</script>
</body>
</html>
(2)json过滤器
先看它如何使用的。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<div >{{didiFamily|json}}</div>
</div>
<script src="js/vue.js"></script>
<script>
new Vue({
el:"#app",
data:{
didiFamily:{
"name":"ddfe",
"age":3
}
}
})
</script>
</body>
</html>
浏览器的显示结果:
再来看一下源码。
json: {
read: function read(value, indent) {
return typeof value === 'string' ? value : JSON.stringify(value, null, Number(indent) || 2);
},
write: function write(value) {
try {
return JSON.parse(value);
} catch (e) {
return value;
}
}
}
主要说一说，JSON的stringify函数和JSON的parse函数。
stringify函数的功能是把对象或者数组转换为JSON字符串。parse函数的功能是把有效的json字符串解析为对象。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>json过滤器</title>
</head>
<body>
</body>
<script>
var a = {a:1,b:2};
var str=JSON.stringify(a);//"{"a":1,"b":2}"
var ps=JSON.parse(str);//{a:1,b:2}
</script>
</body>
</html>
(3)限制过滤器limitBy、filterBy、orderBy
这3个过滤器处理的数据必须是数组，否则程序会报错。
limitBy显示以偏移量(默认为0)开始的N个数组。
filterBy要么处理数组搜索字符串(参数提供)，要么处理对象对所有属性搜索字符串，如果提供特定属性，使用"in"语法。
orderBy如果参数小于0，那么是降序排列，如果参数大于0，那么是升序排列。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<div v-for="num in nums| limitBy 10">
<div>{{num}}</div>
<!--显示从默认的0开始的10个元素-->
</div>
<div v-for="num in nums| limitBy 10 2">
<div>{{num}}</div>
<!--显示从索引为2开始的10个元素-->
</div>
<div>{{arr|filterBy "hello"}}</div>
<input v-model="name"/>
<ul>
<li v-for="user in users|filterBy name in 'name'">
{{user.name}}
</li>
<!--动态参数作为搜索字段-->
</ul>
<div>{{nums|orderBy -1}}</div>
<!--参数小于,0，那么是降序排列，参数大于0，那么是升序排列-->
<div>{{nums|orderBy 1}}</div>
</div>
<script src="js/vue.js"></script>
<script>
new Vue({
el:"#app",
data:{
nums:[1,2,3,4,5,6,7,18,9,10,11,12,13],
arr:["hello1","hello2","hello3","welcome"],
users:[
{name:"Bruce"},
{name:"Chuck"},
{name:"Jackie"}
],
name:""
}
})
</script>
</body>
</html>
(4)currency过滤器
作用是给数字添上货币符号，默认的为$美元。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<div>{{"122334"|currency "￡"}}</div>
</div>
<script src="js/vue.js"></script>
<script>
new Vue({
el:"#app"
})
</script>
</body>
</html>
(5)debounce过滤器
作用是延迟一段时间处理。一般与v-on指令结合使用。默认延迟时间300毫秒。如果监听用户的input事件，有时可用来防止频繁调用。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<input @keyup="onkeyup|debounce 3500"/>
</div>
<script src="js/vue.js"></script>
<script>
new Vue({
el:"#app",
methods:{
onkeyup:function(){
alert("3500毫秒后执行onkeyup方法");
}
}
})
</script>
</body>
</html>
3.自定义过滤器
首先，filter函数是一个挂载到Vue上的全局函数(打印window可观察到)，然后要说明的是它接收的参数，第一个过滤器的id名字，第二个是一个定义过滤器的function。下面从参数类型分别来讨论function。
(1)单个参数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>单个参数的自定义过滤器</title>
</head>
<body>
<div id="demo">
<span v-text="message|reverse"></span>
</div>
<script src="js/vue.js"></script>
<script>
console.log(window);
</script>
<script>
Vue.filter("reverse",function(value){
return value.split("").reverse().join("");
})
var vm=new Vue({
el:"#demo",
data:{
message:"hello world!"
} })
</script>
</body>
</html>
(2)多参数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>多参数的自定义过滤器</title>
</head>
<body>
<div id="demo">
<span v-text="message |wrap 'before' 'end' "></span>
</div>
<script src="js/vue.js"></script>
<script>
console.log(window);
</script>
<script>
Vue.filter("wrap",function(value,begin,end){
return begin+""+value+""+end;
})
var vm=new Vue({
el:"#demo",
data:{
message:"hello"
} });
</script>
</body>
</html>
(3)双向过滤器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<p>{{message}}</p>
<input type="text" v-model="message|filterExample"/>
</div>
<script src="js/vue.js"></script>
<script>
Vue.filter("filterExample",{
read:function(val){
return "read "+val;
},
write:function(newVal,oldVal){
return oldVal+" write";
}
})
new Vue({
el:"#app",
data:{
message:"hello world"
}
})
</script>
</body>
</html>
双向过滤器的DEMO
(4)动态参数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<input v-model="userInput"/>
<span>{{msg | concat userInput}}</span>
<script src="js/vue.js"></script>
<script>
Vue.filter("concat",function(value,input){
return value+input;
});
new Vue({
el:"#app",
data:{
msg:"hello",
userInput:""
}
})
</script>
</div>
</body>
</html>
4.自己写一个filter
注意点，过滤器的名字如果与内置过滤器冲突，内置过滤器会被覆盖。
双向过滤器的DEMO:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<p>{{message}}</p>
<input type="text" v-model="message|filterExample"/>
</div>
<script src="js/vue.js"></script>
<script>
Vue.filter("filterExample",{
read:function(val){
return "read "+val;
},
//第一次进入的时候执行read函数
write:function(newVal,oldVal){
return oldVal+" write";
}
//当value值发生改变时，执行write函数。
})
new Vue({
el:"#app",
data:{
message:"hello world"
}
})
</script>
</body>
</html>
5.源码解析
(1)capitalize过滤器
capitalize: function capitalize(value) {
if (!value && value !== 0) return '';
value = value.toString();
return value.charAt(0).toUpperCase() + value.slice(1);
//charAt通过索引0取得首字母，然后通过toUpperCase()转化为大写，然后通过slice截取的从索引1开始的字符串，做加法。
},
(2)uppercase过滤器
uppercase: function uppercase(value) {
return value || value === 0 ? value.toString().toUpperCase() : '';
//先转为字符串，然后进行大写
},
(3)lowercase过滤器
lowercase: function lowercase(value) {
return value || value === 0 ? value.toString().toLowerCase() : '';
//先转字符串儿，然后小写
},
第2章:Class与Style绑定
关于样式常常会操作元素的class列表和它的内联样式。
1.绑定HTML Class
(1)对象语法
传给v-bind:class一个对象，通过变量来动态切换class,该对象要么是对象字面量，要么是数据中直接的一个对象。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>单个参数的自定义过滤器</title>
</head>
<body>
<div id="demo">
<div class="static" v-bind:class="{'didi-orange':isRipe,'didi-green':isNotRipe}"></div>
<div class="static" v-bind:class="ddfe"></div>
</div>
<script src="js/vue.js"></script>
<script> var vm=new Vue({
el:"#demo",
data:{
isRipe:true,
isNotRipe:false,
ddfe:{
didiAge:4,
didiMember:6000
}
} })
</script>
</body>
</html>
渲染的效果为
另外，还可以绑定一个返回对象的计算属性。略。
(2)数组语法
2.绑定内联样式
vue.js基础知识篇(4):过滤器、class与style的绑定2的更多相关文章
- vue.js基础知识篇(6):组件详解
第11章:组件详解 组件是Vue.js最推崇也最强大的功能之一,核心目标是可重用性. 我们把组件代码按照template.style.script的拆分方式,放置到对应的.vue文件中. 1.注册 V ...
- vue.js基础知识篇(1):简介、数据绑定
目录第一章:vue.js是什么? 第二章:数据绑定第三章:指令第四章:计算属性第五章:表单控件绑定代码链接: http://pan.baidu.com/s/1qXCfzRI 密码: 5j79 第一章: ...
- vue.js基础知识篇(7):表单校验详解
目录 网盘 第12章:表单校验 1.npm安装vue-validator $ npm install vue-validator 代码示例: var Vue=require("vue&quo ...
- vue.js基础知识篇(5):过渡、Method和Vue实例方法
第8章:过渡 1.CSS过渡 2.JavaScript过渡 3.渐进过渡 第9章:method Vue.js的事件一般通过v-on指令配置在HTML中,虽然也可以在js的代码中使用原生的addEven ...
- vue.js基础知识篇(3):计算属性、表单控件绑定
第四章:计算属性 为了避免过多的逻辑造成模板的臃肿不堪,可使用计算属性来简化逻辑. 1.什么是计算属性 <!DOCTYPE html><html lang="en" ...
- vue.js基础知识篇(2):指令详解
第三章:指令 1.语法 指令以v-打头,它的值限定为绑定表达式,它负责的是按照表达式的值应用某些行为到DOM上. 内部指令有v-show,v-else,v-model,v-repeat,v-for,v ...
- 简单易懂的 Vue.js 基础知识 ！
根 vue 实例 let viewModel = new Vue({ // 包含数据.模板.挂载元素.方法.生命周期钩子等选项 }) Hello Wrold <!-- 这是我们的 View - ...
- Vue.js 基础知识
0. Vue.js 是轻量级的MVVM框架: 1. index.html:<app></app>:组件载入:入口文件会默认调用一个 main.js: 2. App.vue:入口 ...
- Vue.js基础知识
<!DOCTYPE html> <html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml&q ...
随机推荐
- MS MDS系列之初始MS Master Data Service(微软主数据服务)
背景介绍: 主数据服务(Master Data Services)是微软平台支持的主数据管理(MDM)平台.类似MDS这样的系统,如果后续维护得当,会给企业提供一个强大的中心数据库系统,来防止企业数据 ...
- 前端十万个为什么(之一)：我们为什么需要npm？
p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px ".PingFang SC"; color: #454545 } span ...
- Webservice 实践
摘要: 实现webservice,spring ws,XFire实现方法未实现.(记得补上~) 1 概述 1.1关键技术 SOAP:简单对象存取协议.是XML Web Service 的通信协议.当用 ...
- 为什么 1000 == 1000会返回false，100 == 100会返回true
给你们看一段神奇的代码 /*对这段代码可以提供如下解释 * 判断两个对象是否相等的是看两个对象的引用是否相同 如果相同那么就返回true否则返回false * Integer会对-128~127之间的 ...
- 22. leetcode 242. Valid Anagram(由颠倒字母顺序而构成的字)
22. 242. Valid Anagram(由颠倒字母顺序而构成的字) Given two strings s and t, write a function to determine if t i ...
- discuz相关总结
1.dz的下载安装 进入discuz官方网站下载discuz安装包:拷贝出其中的upload目录,重命名为discuz,将discuz目录上传至linux公网服务器: 配置web服务器,nginx或者 ...
- 一次和matplotlib和numpy的初识及简单的异常值清理
1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 ...
- [SDOI2011]染色 线段树+树链剖分
考试一共四个半小时,光这道题就打了三个小时..然后又改了俩小时才过.我太蒟蒻了. 其实数据结构这种题就看第一遍打没打顺,顺了就A了,要是再找错再改就慢了,而且样例过了不能说明任何问题(虽然考试的时候我 ...
- Eclipse创建Maven项目报错的解决
报错1:Could not resolve archetype org.apache.maven.archetypes:maven-archetype-quickstart 起因:删除一个用quick ...
- 借助AMD来解决HTML5游戏开发中的痛点
借助AMD来解决HTML5游戏开发中的痛点 游戏开发的痛点 现在,基于国内流行引擎(LayaAir和Egret)和TypeScript的HTML5游戏开发有诸多痛点: 未采用TypeScript编译器 ...