vue 过滤器
微笑de向阳 2018-10-09 13:13:05 浏览27 评论0摘要： <body> <div id="app"> <input type="text" v-model="money"> <!-- 有时在页面上渲染的数据需要进行一定的加工，例如需要四舍五入，格式转换等，在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>
用云栖社区APP，舒服~
【云栖快讯】诚邀你用自己的技术能力来用心回答每一个问题，通过回答传承技术知识、经验、心得，问答专家期待你加入！ 详情请点击 评论 点赞 (0) 收藏 (0)
相关文章
- Vue.js 自定义过滤器
- Vue.js 自定义过滤器
- Vue.js 自定义过滤器
- vue.js快速上手
- 02Vue.js快速入门-Vue入门之数据绑定
- 02-Vue入门之数据绑定
- Vue-Methods中使用Filter
- Vue 实战 (一) -- Vue 基础总结
- Vuejs——（2）Vue生命周期，数据，手动挂载，指令…
- vue模板语法
