13_过滤器
过滤器的功能是用来对数据进行特定格式化后再显示，可以重复使用
-
过滤器不会改变原本数据
-
过滤器可以接受参数
-
过滤器可以串联使用
案例：
<body>
<div id="app">
<!-- 基础写法 -->
<h1>衬衫的价格（保留2位小数）是：{{ price | priceFormater }}</h1>
<!-- 过滤器传参 -->
<h1>衬衫的价格（保留3位小数）是：{{ price | priceFormater(3) }}</h1>
<!-- 过滤器可以串联 -->
<h1>衬衫的价格（保留3位小数，单位CNY）是：{{ price | priceFormater(3) | priceUnit}}</h1>
<h1>衬衫的价格（保留3位小数，单位USD）是：{{ price | priceFormater(3) | priceUnit('$')}}</h1>
<!-- 过滤器还可以配合v-bind指令使用 （不能配合v-model）-->
<h1 :title="username | toUpperCase">{{ username | toUpperCase }}</h1>
</div>
<script>
// 全局过滤器
Vue.filter('toUpperCase', function (value) {
return value.toUpperCase();
});
const vm = new Vue({
el: '#app',
data() {
return {
price: 3.14159,
username: 'byboy',
};
},
// 局部过滤器
filters: {
// 默认接受一个参数：参数的值是管道符前面的值
// 第二个参数：第二个参数为过滤器传的参数
// ES6 为参数赋默认值 count 默认值为2，如果有传值就覆盖原来的值
priceFormater(value, count = 2) {
return value.toFixed(count);
},
priceUnit(value, unit = '￥') {
return value + unit;
},
},
});
</script>
</body>
阅读剩余
THE END
