vue教程2-06 过滤器
vue教程2-06 过滤器
过滤器:
vue提供过滤器:
capitalize uppercase currency....
<div id="box">
{{msg|currency ¥}}
</div>
debounce 配合事件,延迟执行
<div id="box">
<input type="text" @keyup="show | debounce 2000">
</div>
数据配合使用过滤器:
limitBy 限制几个
limitBy 参数(取几个)
limitBy 取几个 从哪开始
<div id="box">
<ul>
<!--取2个-->
<li v-for="val in arr | limitBy 2">
{{val}}
</li>
<br/>
<br/> <!--取2个,从第arr.length-2个开始取-->
<li v-for="val in arr | limitBy 2 arr.length-2">
{{val}}
</li>
</ul>
</div>
<script> var vm=new Vue({
data:{
arr:[1,2,3,4,5]
},
methods:{ }
}).$mount('#box'); </script>
filterBy 过滤数据
filterBy ‘谁’
<div id="box">
<input type="text" v-model="a">
<ul>
<li v-for="val in arr | filterBy a">
{{val}}
</li>
</ul>
</div>
<script> var vm=new Vue({
data:{
arr:['width','height','background','orange'],
a:''
},
methods:{ }
}).$mount('#box'); </script>
orderBy 排序
orderBy 谁 1/-1
1 -> 正序
2 -> 倒序
<div id="box">
<input type="text" v-model="a">
<ul>
<li v-for="val in arr | orderBy -1">
{{val}}
</li>
</ul>
</div>
<script> var vm=new Vue({
data:{
arr:['width','height','background','orange'],
a:''
},
methods:{ }
}).$mount('#box'); </script>
自定义过滤器: model ->过滤 -> view
Vue.filter(name,function(input){
});
<div id="box">
{{a | toDou 1 2}}
</div>
<script>
Vue.filter('toDou',function(input,a,b){
alert(a+','+b);
return input<10?'0'+input:''+input;
});
var vm=new Vue({
data:{
a:9
},
methods:{ }
}).$mount('#box'); </script>
时间转化器
<div id="box">
{{a | date}}
</div>
<script>
Vue.filter('date',function(input){
var oDate=new Date(input);
return oDate.getFullYear()+'-'+(oDate.getMonth()+1)+'-'+oDate.getDate()+' '+oDate.getHours()+':'+oDate.getMinutes()+':'+oDate.getSeconds();
}); var vm=new Vue({
data:{
a:Date.now()//返回1970 年 1 月 1日午夜与当前日期和时间之间的毫秒数。
},
methods:{ }
}).$mount('#box'); </script>
过滤html标记
双向过滤器:*
Vue.filter('filterHtml',{
read:function(input){ //model-view
return input.replace(/<[^<+]>/g,'');
},
write:function(val){ //view -> model
return val;
}
});
数据 -> 视图
model -> view
view -> model
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
</style>
<script src="vue.js"></script>
<script>
//<h2>welcome</h2>
Vue.filter('filterHtml',{
read:function(input){ //model-view
alert(1);
return input.replace(/<[^<]+>/g,'');
},
write:function(val){ //view -> model
console.log(val);
return val;
}
});
window.onload=function(){
var vm=new Vue({
data:{
msg:'<strong>welcome</strong>'
}
}).$mount('#box');
}; </script>
</head>
<body>
<div id="box">
<input type="text" v-model="msg | filterHtml">
<br>
{{msg | filterHtml}}
</div>
</body>
</html>
vue教程2-06 过滤器的更多相关文章
- Vue教程:过滤器filters(五)
Vue.js 允许你自定义过滤器,可被用于一些常见的文本格式化.过滤器可以用在两个地方:双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持).过滤器应该被添加在 JavaScrip ...
- vue教程1-07 模板和过滤器
vue教程1-07 模板和过滤器 一.模板 {{msg}} 数据更新模板变化 {{*msg}} 数据只绑定一次 {{{msg}}} HTML转意输出 <!DOCTYPE html> < ...
- vue.js学习 自定义过滤器使用(1)
在这个教程中,我们将会通过几个例子,了解和学习VueJs的过滤器.我们参考了一些比较完善的过滤器,比如orderBy 和 filterBy.而且我们可以链式调用过滤器,一个接一个过滤.因此,我们可以定 ...
- day 83 Vue学习四之过滤器、钩子函数、路由、全家桶等
Vue学习四之过滤器.钩子函数.路由.全家桶等 本节目录 一 vue过滤器 二 生命周期的钩子函数 三 vue的全家桶 四 xxx 五 xxx 六 xxx 七 xxx 八 xxx 一 Vue的过滤 ...
- Vue自带的过滤器
gitHub地址:https://github.com/lily1010/vue_learn/tree/master/lesson05 一 过滤器写法 {{ message | Filter}} 二 ...
- vue教程3-05 vue组件数据传递、父子组件数据获取,slot,router路由
vue教程3-05 vue组件数据传递 一.vue默认情况下,子组件也没法访问父组件数据 <!DOCTYPE html> <html lang="en"> ...
- vue教程3-04 vue.js vue-devtools 调试工具的下载安装和使用
vue教程3-04 vue.js vue-devtools vue调试工具的安装和使用 一.vue-devtools 下载与安装 1.需要 fan qiang 2.打开谷歌浏览器设置--->扩展 ...
- vue教程3-03 vue组件,定义全局、局部组件,配合模板,动态组件
vue教程3-03 vue组件,定义全局.局部组件,配合模板,动态组件 一.定义一个组件 定义一个组件: 1. 全局组件 var Aaa=Vue.extend({ template:'<h3&g ...
- vue教程3-02 vue动画
vue教程3-02 vue动画 以下代码,已经用包管理器下载好vue,animate <!DOCTYPE html> <html lang="en"> &l ...
随机推荐
- Java核心技术之类与对象
知识点 1. 一个对象变量并没有实际包含一个对象,而仅仅引用一个对象.new操作符的返回值也是一个引用. 2. 局部变量不会自动地初始化为null,而必须用过调用new或将他们设置为null进行初始化 ...
- GDI基础(2):绘制文本
1.TextOut()和DrawText()函数 CDC::TextOut()在窗口的指定位置处输出文本,函数声明: virtual BOOL TextOut(int x, int y, LPCTST ...
- orika实现对象复制
1.新建maven工程orika-demo,引入orika依赖,其中pom.xml如下 <?xml version="1.0" encoding="UTF-8&qu ...
- Hibernate利用JDBC批操作
@org.junit.Test public void testBatch() { session.doWork(new Work() { @Override public void execute( ...
- android include使用[转]
需要包含的xml文件,我这里就放了一个Button按钮: btn.xml: <?xml version="1.0" encoding="utf-8"?&g ...
- kepware http接口 java语言开发
读取某变量的值(OK HTTP OkHttpClient client = new OkHttpClient(); Request request = new Request.Builder() .u ...
- 数据压缩之经典——哈夫曼编码(Huffman)
(笔记图片截图自课程Image and video processing: From Mars to Hollywood with a stop at the hospital的教学视频,使用时请注意 ...
- hdu 5072 两两(不)互质个数逆向+容斥
http://acm.hdu.edu.cn/showproblem.php?pid=5072 求n个不同的数(<=1e5)中有多少组三元组(a, b, c)两两不互质或者两两互质. 逆向求解,把 ...
- 认识Hadoop
概述 开源.分布式存储.分布式计算 大数据生态体系 特点:开源.社区活跃 囊括了大数据处理的方方面面 成熟的生态圈 推荐系统 应用场景 搭建大型数据仓库,PB级数据的存储.处理.分析.统计 日志分析 ...
- AutoCompleteTextView 简单用法
http://blog.csdn.net/i_lovefish/article/details/17337999