过滤器 filter
- 作用：文本数据格式化
- 两种过滤器：1 全局过滤器 2 局部过滤器
全局过滤器
- 说明：通过全局方式创建的过滤器，在任何一个vue实例中都可以使用
Vue.filter('filterName', function(value) {
// value 表示要过滤的内容
})
- 示例：
<div>{{ dateStr | date }}</div>
<div>{{ dateStr | date('YYYY-MM-DD hh:mm:ss') }}</div>
<script>
Vue.filter('date', function(value, format) {
// value 要过滤的字符串内容
// format 过滤器的参数
})
</script>
局部过滤器
- 说明：局部过滤器是在某一个vue实例的内容创建的，只在当前实例中起作用
{
data: {},
// 通过 filters 属性创建局部过滤器
filters: {
filterName: function(value) {}
}
}
- 本地过滤器被注册到一个Vue组件中。下面这个示例展示了本地过滤器是如何创建的。这个过滤器的功能是将字母变成大写：
<div id="app">
<h1>{{ name | Upper}}</h1>
</div>
<script src="./vue.js"></script>
<script>
var vm = new Vue({
el: '#app',
data () {
return {
name : 'vue'
}
},
//声明一个本地的过滤器
filters: {
Upper: function(value) {
return value.toUpperCase()
}
}
})
</script>
这是在页面中显示的效果.png
