vue--过滤器
2016-11-29 本文已影响0人
嘬烟盒的程序员
//货币
{{数据 | currency}}
//转 大写
{{数据 | uppercase}}
//转小写
{{数据 | lowercase}}
……
还有好多，不一一列出，先写一个简单的例子，参考一下
<script type="text/javascript" src="js/vue.js" ></script>
<script>
window.onload=function(){
new Vue({
el:'.box',
data:{
d:12,
str:'HELLO',
str2:'hello'
}
});
};
</script>
<body>
<div class="box">
<input type="text" v-model="d" />
<input type="text" v-model="d" />
<p>{{d | currency }}</p>
<p>{{d | currency '￥' 0}}</p>
<p>{{str | lowercase}}</p>
<p>{{str2 | uppercase | lowercase}}</p>
</div>
</body>
多个过滤器:
{{str2 | uppercase | lowercase}}
自定义过滤器
<script>
window.onload=function(){
Vue.filter('reverse',function(input,a,b){
alert(a+b);
return input.split(' ').reverse().join(' ');
});
new Vue({
el:'#box',
data:{
data:'hello Vue'
}
});
};
</script>
<body>
<div id="box">
<p>{{data | reverse 'aa' 'bb'}}</p>
</div>
</body>
—————————————————————————————————
