标签：recent cas fun func rip 日期 ber nta 基础学习
过滤器：filter
格式化变量的输出内容，只用于一些简单的在制作的最后一步对内容的输出格式做些调整（如日期格式化，字母大小写，数字再计算等等）
例如我们需要将最终的结果字符串以大写方式展示出来，还有将小数转化成百分比之后再显示出来
<div id="app"> <input type="text" v-model=‘message‘> {{ message | toupper }} <br /> <input type="text" v-model=‘num‘> {{ num | toprecentage }} </div>
<script>
new Vue({
el : ‘#app‘,
data: {
message: ‘hello world !‘,
num: 0.3,
},
filters : {
toupper : function(val){
return val = val.toUpperCase();
},
toprecentage : function(val) {
return val = val * 100 + ‘%‘;
}
}
});
</script>
过滤器时通过一个 | 符号来实现的，| 前面的是需要处理的值，后面是过滤器的名称，在new Vue()中的filters中添加这些过滤器并写明处理方法就可以了，在处理方法function中可以有2个参数，第一个参数val就是 | 前面的这个值，第二个参数是同时需要传递进来的值，例如：在一个显示钱币单位的例子中
<div id="app"> <input type="text" v-model.number=‘num‘>{{ num | currency(unit) }} </div>
<script>
new Vue({
el : ‘#app‘,
data: {
num : 10 ,
unit : ‘元‘,
},
filters : {
currency : function(val ,unit){
val = val || 0;
unit = unit || ‘元‘;
return val + unit;
}
}
});
</script>
上面这个例子可以通过改变data中的对应的值来改变钱币数和单位，用到了2个参数，第二个参数的传递也很简单。
标签：recent cas fun func rip 日期 ber nta 基础学习
原文地址：http://www.cnblogs.com/huzhuo/p/7475542.html
