您的位置：首页 > 产品设计 > UI/UE

vue自定义过滤器

2017-09-25 21:28 267 查看

vue类提供了一个方法叫filter，通过这个方法我们可以自定义插值过滤器，这个插值过滤器使用方法同内置的过滤器使用方法是一样的：

使用{{key | filterName param}} , 定义Vue.filter
( 过滤的名称，过滤函数)

但是2.0中已经废弃了过滤器,需要我们自己定义

下面是自定义将输入命名转换成驼峰命名的小例子

<body>
<div id="demodemo">
<input type="text" v-model.lazy="msg"/>
<p>{{msg|toCamle}}</p>
</div>
<script src="js/vue.js"></script>
<script type="text/javascript">
需求:将输入内容做驼峰式命名的转化 abc-def=>abcDef
Vue.filter('toCamle',function(value){
return value.replace(/\-([a-zA-Z])/g,function(match,$1){
return $1.toUpperCase();
})
// 驼峰转小写
// Vue.filter('toCamle',function(value){
// return value.replace(/([A-Z])/g,function(match,$1){
// return '-'+ $1.toLowerCase();
// })
// 翻转
// return value.split('').reverse().join('')
})

new Vue({
el:'#demodemo',
data:{
msg:''
}
})
</script>
</body>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航