过滤器的作用
在不改变数据的情况下,输出前端需要的格式数据
过滤器的定义方法
Vue.filter(‘方法名’,function(val){});
过滤器的调用方法
{{ msg|方法名}}
注意事项
- 定义过滤器,必须放在Vue实例化前面
- 在没有冲突的前提下,过滤器可以串联
举例应用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="vue.js"></script>
<script type="text/javascript" src="vue-resource.js"></script>
</head>
<body>
<div id="box">
<p>{{ msg|one|two }}</p>
</div>
</body>
</html>
<script type="text/javascript">
Vue.filter('one',function(val){
return val+'油条'
});
Vue.filter('two',function(val){
return val+'豆浆'
});
var vm = new Vue({
el: '#box',
data: {
msg:'今天吃'
}
});
</script>
过滤器练习地址:https://blog.csdn.net/qq_39383675/article/category/8256374