0105过滤器

最新推荐文章于 2024-11-06 21:48:41 发布

wnashi_万石

最新推荐文章于 2024-11-06 21:48:41 发布

阅读量73

点赞数

分类专栏： 002_Vue零基础

本文链接：https://blog.youkuaiyun.com/w_wangewanbuhuidege/article/details/114336106

版权

002_Vue零基础专栏收录该内容

14 篇文章

订阅专栏

001_XXXX(h3)

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

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

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

			//this为 Window对象
			console.log(this)
			//全局过滤器
			Vue.filter('reversal_dl',function(val,arg2){
				return  arg2+val.split('').reverse().join('')
			})
			
			Vue.filter('reversal_dl_01',function(val){
				return  val.split('').reverse().join('')
			})
			
			
			new Vue({
				el:'#app',
				data(){
					return {
						instring_dl:''
					}
				},
				created(){
					//this为 Vue对象
					console.log(this,'vue的')
				}
				//组件内的过滤器
				// filters:{
				// 	reversal_dl(val,arg2){
				// 		//          字符串转数组  翻转    数组转字符串
				// 		return  arg2+val.split('').reverse().join('')
				// 	}
				// }
			})
		</script>
</body>
</html>