vue自定義過濾器

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>



發佈了24 篇原創文章 · 獲贊 14 · 訪問量 7萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章