Vue.filter的用法（二）

移除双向过滤器：

Vue.filter('change', {
	read: function(val){
		return val
	},
	write: function(val, oldVal){
		return isEmail(val) ? val : oldVal
	}
})

 

1、组件内部过滤（适用于处理数据显示的样式，不会改变原数据）

<div id="app">
	<ul>
		<li v-for="item in list">{{item.id|filterAdd1|filterAdd2}}</li>
	</ul>
</div>
<script>
var vm = new Vue({
	el:'#app',
	data () {
		return {
			list: [{'id': 0, 'title': '11111', 'cont': 'aaaaaa'}, {'id': 1, 'title': '22222', 'cont': 'bbbbbb'}, {'id': 2, 'title': '33333', 'cont': 'cccccc'}, {'id': 3, 'title': '44444', 'cont': 'dddddd'}]
		}
	},
	filters: {
		filterAdd1 (item) {
			return item + 30
		},
		filterAdd2 (item) {
			return '$'+item
		}
	}
})
</script>

2、注册在全局的filter，filter传值，filter动态传值，多个过滤器要有先后顺序

过滤传值，带引号的是字符串，不带是number，传的值可以动态绑定

<div id="app">
	<ul>
		<li v-for="item in list">{{item.id|filterAdd1(Number(input), 20)|filterAdd2}}</li>
	</ul>
	<input type="text" placeholder="place" v-model="input" />
</div>
<script>
Vue.filter('filterAdd1', function(value, one, two){
	console.log('value: '+value+', one: '+one+', two: '+two)
	return value+one+two
})
Vue.filter('filterAdd2', function(value){
	console.log('value: '+value)
	return '$'+value
})
var vm = new Vue({
	el:'#app',
	data () {
		return {
			input: 5,
			list: [{'id': 0, 'title': '11111', 'cont': 'aaaaaa'}, {'id': 1, 'title': '22222', 'cont': 'bbbbbb'}, {'id': 2, 'title': '33333', 'cont': 'cccccc'}, {'id': 3, 'title': '44444', 'cont': 'dddddd'}]
		}
	},
	methods:{}
})
</script>

 

3、计算属性筛选，methods方法筛选：

<div id="app">
	<div @click="addMore">加载更多</div>
	<ul><li v-for="item in filterlist">{{item.id}}</li></ul><hr/>
	<ul><li v-for="item in filterlistFun()">{{item.id}}</li></ul>
</div>
<script>
var vm = new Vue({
	el: '#app',
	data () {
		return {
			size: 5,
			list: [
				{'id': 00, 'title': '11111', 'cont': 'aaaaaa'}, {'id': 01, 'title': '22222', 'cont': 'bbbbbb'},
				{'id': 02, 'title': '33333', 'cont': 'cccccc'}, {'id': 03, 'title': '44444', 'cont': 'dddddd'},
				{'id': 04, 'title': '55555', 'cont': 'eeeeee'}, {'id': 05, 'title': '66666', 'cont': 'ffffff'},
				{'id': 06, 'title': '77777', 'cont': 'gggggg'}, {'id': 07, 'title': '88888', 'cont': 'hhhhhh'},
				{'id': 08, 'title': '99999', 'cont': 'iiiiii'}, {'id': 09, 'title': '10101', 'cont': 'jjjjjj'},
				{'id': 10, 'title': '11111', 'cont': 'kkkkkk'}, {'id': 11, 'title': '12121', 'cont': 'llllll'},
				{'id': 12, 'title': '13131', 'cont': 'mmmmmm'}, {'id': 13, 'title': '14141', 'cont': 'nnnnnn'},
				{'id': 14, 'title': '15151', 'cont': 'oooooo'}, {'id': 15, 'title': '16161', 'cont': 'pppppp'},
				{'id': 16, 'title': '17171', 'cont': 'qqqqqq'}, {'id': 17, 'title': '18181', 'cont': 'rrrrrr'},
				{'id': 18, 'title': '19191', 'cont': 'ssssss'}, {'id': 19, 'title': '20202', 'cont': 'tttttt'},
				{'id': 20, 'title': '21212', 'cont': 'uuuuuu'}
			]
		}
	},
	computed: {
		filterlist () {
			let num = this.size
			return this.list.filter(function(number){
				return number.id < num
			})
		}
	},
	methods: {
		filterlistFun () {
			let num = this.size
			return this.list.filter(function(number){
				return number.id < num
			})
		},
		addMore () {this.size += 3}
	}
})
</script>

4、使用js中的迭代函数filter，对数组中的每一项运行给定函数，返回该函数会返回true的项组成的数组

<div id="app">
	<h2>Vue-for</h2>
	<ul><li v-for="item in shoppingList">{{item}}</li></ul>
	<h2>Vue-for filter实现</h2>
	<ul>
		Filter Key<input type="text" v-model="key" />
		<li v-for="item in filterShoppingList">{{item}}</li>
	</ul>        
</div>  
<script>

var app = new Vue({
	el: '#app',
    data: {
        shoppingList: ["Milk", "Donuts", "Cookies", "Chocolate", "Peanut Butter", "Pepto Bismol", "Pepto Bismol (Chocolate flavor)", "Pepto Bismol (Cookie flavor)"],
        key: ""
    },
    computed: {
        filterShoppingList: function () {
            var key = this.key;
            var shoppingList = this.shoppingList;
            return shoppingList.filter(function (item) {
                return item.toLowerCase().indexOf(key.toLowerCase()) != -1
            });;
        }
    },
})
</script>