vue 自定义过滤器

vue允许自定义过滤器,被用作一些常见文本的格式化。由“管道符”指示,格式如下:

<!-- 在两个大括号中 -->

{{message | capitalize}}

<!-- 在 v-bind指令中 -->

<div v-bind:id="rawId | formatId"></div>

实例如下:

<div id="app">
{{ time | formatTime}}
</div>

<script>
new Vue({
el: "#app",
data: {
time: ‘12345643‘
},
filters: {
//对时间戳进行格式化
formatTime: function(value){
var unixTimestamp = new Date( value*1000 );
var D = new Date(unixTimestamp);
var H = D.getHours()>9 ? D.getHours() : "0"+D.getHours(),
M = D.getMinutes()>9 ? D.getMinutes() : "0"+D.getMinutes();
return H + ":" + M
}
}
})
</script>
时间: 2024-08-17 10:19:23

vue 自定义过滤器的相关文章

Vue自定义过滤器

gitHub地址: https://github.com/lily1010/vue_learn/tree/master/lesson05 一 自定义过滤器(注册在Vue全局) 注意事项: (1)全局方法 Vue.filter() 注册一个自定义过滤器,必须放在Vue实例化前面 (2) 过滤器函数始终以表达式的值作为第一个参数.带引号的参数视为字符串,而不带引号的参数按表达式计算 (3)可以设置两个过滤器参数,前提是这两个过滤器处理的不冲突 (4)用户从input输入的数据在回传到model之前也

vue自定义过滤器的创建和使用

过滤器:生活中有很多例子,净水器 空气净化器 .过滤器的作用:实现数据的筛选.过滤.格式化. vue1.*版本是有内置的过滤器,但是在vue2.*所有的版本都已经没有自带的过滤器了. 1.过滤器创建 过滤器的本质 是一个有参数 有返回值的方法 new Vue({ filters:{ myCurrency:function(myInput){ return 处理后的数据 } } }) 2.过滤器使用语法: <any>{{表达式 | 过滤器}}</any>举个例子: <h1>

Vue自定义过滤器格式化数字三位加一逗号

<template> <div class="index-compont"> <div class="totalCount">{{num | NumFormat}}<span>元</span></div> </div> </template> <script> data(){ return { num: 876543.00 } }, filters: { Nu

Vue.js学习 Item14 – 过滤器与自定义过滤器

基础 类似于自定义指令,可以用全局方法 Vue.filter() 注册一个自定义过滤器,它接收两个参数:过滤器 ID 和过滤器函数.过滤器函数以值为参数,返回转换后的值: Vue.filter('reverse', function (value) { return value.split('').reverse().join('') }) <!-- 'abc' => 'cba' --> <span v-text="message | reverse">&

Vue.js 自定义过滤器

过滤器,本质上就是一个函数.其作用在于用户输入数据后,它能够进行处理,并返回一个数据结果. Vue.js 与 AngularJS 中的过滤器语法有些相似,使用管道符(|)进行连接,代码示例如下: {{'abc' | uppercase}}    'abc' => 'ABC' 这里使用了Vue.js 内置的过滤器 uppercase,将字符串中的字母全部转换成大写形式. Vue.js 支持在任何出现表达式的地方添加过滤器,除了上面例子中的 双大括号 表达式之外,还可以在绑定指令的表达式后调用,代码

vue学习(二):自定义过滤器和自定义指令

#自定义指令 自定义指令的参数有: el: 指令所绑定的元素,可以用来直接操作 DOM . binding: 一个对象,包含以下属性: name: 指令名,不包括 v- 前缀. value: 指令的绑定值, 例如: v-my-directive="1 + 1", value 的值是 2. oldValue: 指令绑定的前一个值,仅在 update 和 componentUpdated 钩子中可用.无论值是否改变都可用. expression: 绑定值的字符串形式. 例如 v-my-di

vue(2) -- 过滤器

1.vue 提供的过滤器 debounce  配合事件,延迟执行 <div id="box"> <input type="text" @keyup="show | debounce 200"> </div> <script> new Vue({ el:"#box", data:{ }, methods:{ show:function (){ alert(1); } } }) &l

VueJs 自定义过滤器使用总结

过滤器是一个通过输入数据,能够及时对数据进行处理并返回一个数据结果的简单函数.Vue有很多很便利的过滤器,可以参考官方文档, http://cn.vuejs.org/api/#过滤器 ,过滤器通常会使用管道标志 " | ", 比如: {{ msg | uppercase }} // 'abc' => 'ABC' 在上述的例子中,在插值的时候,使用了Vue的一个uppercase过滤器,msg可以是直接写死,写成{{ 'abc' | uppercase }},也可以利用用户输入来改

Vue2.0笔记——{{}}模板与自定义过滤器

模板语法 让我们回到最开始 <div id="app"> <h1>{{message}}</h1> </div> <script> var vm = new Vue({ el:'#app', data:{ message:'HelloWorld' } }) </script> 这是一个HelloWorld,简单的通过模板输出.我们称之为数据绑定,而最常见的就是"Mustache"语法 (双大括号