vue 过滤器

<body>
<div id="app">

<input type="text" v-model="money">
<!-- 有时在页面上渲染的数据需要进行一定的加工,例如需要四舍五入,格式转换等,在vue中推荐的做法是使用过滤器 -->
<!-- 过滤器使用格式:{{数据|过滤器}} -->
<p>{{money|rounding|seperate|currency}}</p>
<!-- 区别 任何一个值换一种写法 -->
</div>


<script src="vue.js"></script>
<script>
// vue中没有自带的过滤器,必须自己创建过滤器。
// 创建过滤器有两种方法:全局注册过滤器,局部过滤器。
// 全局注册的过滤器可以在项目中任何地方使用
// 在某个组件中局部注册的过滤器只能在这个组件的模板中使用。

// Vue.filter方法,用于全局注册一个过滤器,第一个参数是过滤器名字,第二个参数是过滤器函数。过滤函数接受需要过滤的值为参数,返回过滤之后的值。
// 全局注册过滤器必须在根组件之前。
Vue.filter("currency", function (v, c) {
if (c)
return c + v;
return "¥" + v;
});

new Vue({
el: "#app",
data: {
money: 0,
},
methods: {

},
// filter用于在本组件中注册过滤器,在某个组件中局部注册的过滤器,只能在这个组件的模板中使用,类型是一个对象,对象中键是一个过滤器名字,值是过滤函数。
filters: {
rounding(v) {
if (v == null || v == undefined||v=="") {
return null;
}
return v.toFixed(2);
},
seperate(v) {
let str="v";
let count=0;
for(let i=str.length-4;i>=0;i--){
count++;
if(count==3&&i!=0){
count=0;
let arr=str.split("");
arr.splice(i,0,",");
str=arr.json("");
}
}
return str;
},

}
})



function n(num) {
var str = "" + num;
var arr = str.split("");
console.log(arr)
for (var i = arr.length - 3; i > 0; i -= 3) {
console.log(i)
arr.splice(i, 0, ",");
}
return arr.join("");
}
// console.log(n(123456789))
</script>
</body>
上一篇:vue key属性


下一篇:【android基础】图文并茂讲解activity的生命周期