第五讲===>过滤器

  • 过滤器就是可以对我们的数据进行添油加醋然后再显示
  • 过滤器有全局过滤器和组件内的过滤器
    • 全局过滤器Vue.filter('过滤器名',过滤方式fn );
    • 组件内的过滤器 filters:
    • {{ msg | 过滤器名}}
  • 最终都是在过滤方式fn里面return产出最终你需要的数据

vue中的this是vue封装好给我们使用的，跟平常方法里面的this是不同的

代码

<!DOCTYPE html>
<html>
<head>
	<title>过滤器</title>
</head>
<body>
		<div id="app">
			我输入的：<input type="text" name="" v-model='instring'></br>
			我输出的：{{ instring }}</br>
			{{ instring | reversal('翻转输出：')}}
		</div>

		<script type="text/javascript" src="vue.js"></script>
		<script type="text/javascript">

			console.log(this)
			Vue.filter('reversal',function(val,arg2){
				return  arg2+val.split('').reverse().join('')
			})
			new Vue({
				el:'#app',
				data(){
					return {
						instring:''
					}
				},
				created(){
					console.log(this,'vue的')
				}
				// filters:{
				// 	reversal(val,arg2){
				// 		//          字符串转数组  翻转    数组转字符串
				// 		return  arg2+val.split('').reverse().join('')
				// 	}
				// }
			})
		</script>
</body>
</html>
posted @ 2020-03-26 22:38  xl4ng  阅读(136)  评论(0)  编辑  收藏  举报