<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="app"></div>
<script type="text/javascript" src="./vue.min.js"></script>
<script type="text/javascript">
// 全局过滤器
//value要处理的字符串 arg1形参
Vue.filter('myReverse',function(value,arg1) {
return arg1+' '+ value.split('').reverse().join('');
});
// 过滤器的作用： 对你当前的数据添油加粗
/*在组件内部用 filters:{
* value是要过滤的字符串
过滤器的名字:function(value){
//内部一定要return
}
调用过滤器 ： 数据属性 | 过滤器的名字
}
*/
var App = {
data(){
return{
price: 0,
msg:'hello filter'
}
},
template:`
<div>
<input type="number" name = 'price' v-model = 'price'/>
<h3>{{price | myCurrentcy}}</h3>
<h4>{{ msg | myReverse('hehe')}}</h4>
</div>
`,
filters:{
myCurrentcy:function(value) {
//字符串拼接
return '¥' + value;
}
}
}
new Vue({
el:'#app',
components:{
App
},
template:'<App />'
});
</script>
</body>
</html>
751
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
