概述
- 过滤器就是可以对我们的数据进行添油加醋然后再显示
- 过滤器有全局过滤器和组件内的过滤器
- 全局过滤器Vue.filter('过滤器名',过滤方式fn );，全局过滤器需要一个一个的定义
- 组件内的过滤器 filters:{ '过滤器名',过滤方式fn }，可以定义多个
- 使用方式：{{ msg | 过滤器名}}
- 最终都是在过滤方式fn里面return产出最终你需要的数据
代码
<!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>运行效果
reversal(val,arg2)
val是输入，arg2是传入的参数
996
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
