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>