vue14 自定义过滤器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>智能社——http://www.zhinengshe.com</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<style>
</style>
<script src="vue.js"></script>
<script>
</script>
</head>
<body>
<div id="box">
{{a | toDou}}
</div>
<script>
Vue.filter('toDou',function(input){
return input<10?'0'+input:''+input;
});
var vm=new Vue({
data:{
a:9
},
methods:{
}
}).$mount('#box');
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>智能社——http://www.zhinengshe.com</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<style>
</style>
<script src="vue.js"></script>
<script>
</script>
</head>
<body>
<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>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>智能社——http://www.zhinengshe.com</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<style>
</style>
<script src="vue.js"></script>
<script>
</script>
</head>
<body>
<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()
},
methods:{
}
}).$mount('#box');
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>智能社——http://www.zhinengshe.com</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<style>
</style>
<script src="vue.js"></script>
<script>
</script>
</head>
<body>
<div id="box">
<input type="text" v-model="msg | fiterHtml">
<br>
<div v-html="msg"> </div>
</div>
<script>
//<h2>welcome</h2>
Vue.filter('fiterHtml',function(input){
return input.replace(/<[^<]+>/g,'');
});
var vm=new Vue({
data:{
msg:'<strong>welcome</strong>'
},
methods:{ }
}).$mount('#box'); </script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>智能社——http://www.zhinengshe.com</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<style> </style>
<script src="vue.js"></script>
<script>
//<h2>welcome</h2>
Vue.filter('filterHtml',{
read:function(input){ //数据-视图页面
alert(1);
return input.replace(/<[^<]+>/g,'');
},
write:function(val){ //视图页面 -> 数据
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}}}
</div>
</body>
</html>
vue14 自定义过滤器的更多相关文章
- 实现MVC自定义过滤器，自定义Area过滤器，自定义Controller，Action甚至是ViewData过滤器
MVC开发中几种以AOP方式实现的Filters是非常好用的,默认情况下,我们通过App_Start中的FilterConfig来实现的过滤器注册是全局的,也就是整个应用程序都会使用的,针对单独的Fi ...
- lucene自定义过滤器
先介绍下查询与过滤的区别和联系,其实查询(各种Query)和过滤(各种Filter)之间非常相似,可以这样说只要用Query能完成的事,用过滤也都可以完成,它们之间可以相互转换,最大的区别就是使用过滤 ...
- asp.net MVC之 自定义过滤器(Filter) - shuaixf
一.系统过滤器使用说明 1.OutputCache过滤器 OutputCache过滤器用于缓存你查询结果,这样可以提高用户体验,也可以减少查询次数.它有以下属性: Duration :缓存的时间, 以 ...
- angular之自定义过滤器的使用
自定义过滤器需要使用filter函数,格式如下: filter("filterName',function(){ return function(target,args){ .... } } ...
- 第六节：Vue过滤器的用法和自定义过滤器
1.过滤器的用法,用 '|' 分割表达式和过滤器. 例如:{{ msg | filter}} {{msg | filter(a)}} a就标识filter的一个参数. 用两个过滤器:{{ ...
- .net中自定义过滤器对Response内容进行处理
原文:http://www.cnblogs.com/zgqys1980/archive/2008/09/02/1281895.html 代码DEMO:http://files.cnblogs.com/ ...
- asp.net MVC之 自定义过滤器(Filter)
一.系统过滤器使用说明 1.OutputCache过滤器 OutputCache过滤器用于缓存你查询结果,这样可以提高用户体验,也可以减少查询次数.它有以下属性: Duration:缓存的时间,以秒为 ...
- Vue自定义过滤器
gitHub地址: https://github.com/lily1010/vue_learn/tree/master/lesson05 一 自定义过滤器(注册在Vue全局) 注意事项: (1)全局方 ...
- 关于angularjs 中自定义过滤器
包子认为,在angularjs中,经常需要用到自定义过滤器,来过滤相应的功能,自定义过滤器非常的简单,我就直接贴代码啦 其中input就是你需要进行操作的对象,,,用法就直接就是 是不是很easy.. ...
随机推荐
- [SCOI2016]美味(可持久化线段树）
可持久化trie树?好像和可持久化权值线段树差不多.. 如果这题没有那个\(x[i]\)这题就是一个裸的可持久化trie树. 仔细想想,多了这个\(x[i]\)之后有什么影响? 就是我们查询区间的时候 ...
- 找tensorboard
一开始因为用户不对,提示tensorboard:未找到命令 切换正确账户寻找tensorboard 然后打开Xstart,输入firefox,把链接输入进去 即可
- 每一个程序猿都应该用MBP
换笔记本的想法非常久了.前段时间换工作就想看换工作之后是什么情况吧. 可能工作配的笔记本就是MBP.后来发现是想多了,新工作的笔记本是Thinkpad X240. 配置全然够用了,8G内存+128G的 ...
- xcode 及 MAC 经常使用快捷键
郝萌主倾心贡献,尊重作者的劳动成果,请勿转载. 假设文章对您有所帮助,欢迎给作者捐赠,支持郝萌主,捐赠数额任意.重在心意^_^ 我要捐赠: 点击捐赠 Cocos2d-X源代码下载:点我传送 黑苹果键盘 ...
- HTML5 界面元素 Canvas 參考手冊
HTML5 界面元素 Canvas 參考手冊 太阳火神的漂亮人生 (http://blog.csdn.net/opengl_es) 本文遵循"署名-非商业用途-保持一致"创作公用协 ...
- 经常使用传感器协议1：CJ/T-188 水表协议解析1
本文以实例说明CJ/T-188水表协议的解析过程,下面数据未经特殊说明,均指十六进制. 数据发送: FE FE FE FE 68 10 44 33 22 11 00 33 ...
- Android JNI和NDK学习(09)--JNI实例二 传递类对象
1 应用层代码 NdkParam.java是JNI函数的调用类,它的代码如下: package com.skywang.ndk; import android.app.Activity; impo ...
- 关于webpack插件
1.HtmlWebpackPlugin 插件 这个插件的作用是依据一个简单的index.html模板,生成一个自动引用你打包后的JS文件的新index.html.这在每次生成的js文件名称不同时非常有 ...
- MySQL格式化日期参数
MySQL格式化日期参数 %a 缩写星期名 %b 缩写月名 %c 月,数值 %D 带有英文前缀的月中的天 %d 月的天,数值(00-31) %e 月的天,数值(0-31) %f 微秒 %H 小时 (0 ...
- CUDA还未产出，又要出北洋多元统计习题集
其实目前是自己摸清了一个套路.genome realign的算法,以及CUDA的写法都已经有数了,前两天也弄完了关静的所有任务.但是今天关静早上一上来就宣布一个重磅消息:除了全学期的作业和期末论文,另 ...