<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<!-- 数据price和msg通过函数myPrice和myReverse加工,再显示出来 -->
<h3>{{price | myPrice('$')}}</h3>
<h3>{{msg | myReverse}}</h3>
</div>
<script src="vue.js"></script>
<script>
//过滤器 数据通过过滤器,再显示出来
//需求:为20 添加$
//创建全局过滤器 目标数据反转
Vue.filter('myReverse',(val) =>{
return val.split('').reverse().join('')
})
new Vue({
el:'#app',
data:{
price:10,
msg:'hello'
},
//局部过滤器
filters:{
myPrice:function (price,a) {
return a + price
}
}
})
</script>
</body>
</html>