文档https://cn.vuejs.org/v2/guide/filters.html

html 片段

  <div class="app">
<div>{{msg | _.upper | _.lower | _.capitalize}}</div>
<div>{{na | _.min }}</div>
<div>{{na | _.nth(1) }}</div>
<div>{{ n | _.timer}}</div>
</div>

js 片段

Vue.filter('_.upper', v => _.toUpper(v))
Vue.filter('_.lower', v => _.toLower(v)) // 获取集合的最小值
Vue.filter('_.min', v => _.min(v)) // 获取集合的指定元素
Vue.filter('_.nth', (v, n) => _.nth(v, n)) // 首字母大写
Vue.filter('_.capitalize', v => _.capitalize(v)) Vue.filter('_.timer', v => {
// 返回 00::00:00 格式时间
let nowTime = '';
let hour = 0,
minute = 0,
second = 0; const h = Math.floor(v / 60 / 60);
hour = h >= 60 || h >= 10
? h
: '0' + h; const m = Math.floor(v / 60 % 60);
minute = m >= 60 || m >= 10
? m
: '0' + m;
const s = Math.floor(v % 60);
second = s >= 10
?s
: '0' + s; nowTime = v >= (60 * 60)
? hour + ":" + minute + ":" + second
: hour + ':' + minute + ":" + second;
return nowTime;
}) new Vue({
data() {
return {
msg: 'click',
na: [1, 2, 3],
n: 1
}
},
mounted(){
setInterval(()=>{
this.n += 30;
}, 100)
}
}).$mount('.app')

vue 数据管道的更多相关文章

  1. PB数据管道

    数据管道提供了一种不同数据库之间传递数据和(或)表结构的方法. 数据管道对象 要完毕数据管道的功能须要提供例如以下内容: 须要数据源和目标数据库,并可以和这两个数据库正常联接 须要源数据库中的哪些表: ...

  2. 西安电话面试:谈谈Vue数据双向绑定原理,看看你的回答能打几分

    最近我参加了一次来自西安的电话面试(第二轮,技术面),是大厂还是小作坊我在这里按下不表,先来说说这次电面给我留下印象较深的几道面试题,这次先来谈谈Vue的数据双向绑定原理. 情景再现: 当我手机铃声响 ...

  3. Vue数据双向绑定原理及简单实现

    嘿,Goodgirl and GoodBoy,点进来了就看完点个赞再go. Vue这个框架就不简单介绍了,它最大的特性就是数据的双向绑定以及虚拟dom.核心就是用数据来驱动视图层的改变.先看一段代码. ...

  4. Kafka笔记7(构建数据管道)

    构建数据管道需要考虑的问题: 及时性  可靠性 高吞吐量和动态吞吐量   数据格式  转换    安全性   故障处理能力  耦合性与灵活性 数据管道的构建分为2个阵营,ETL和ELT ETL:提取- ...

  5. 【学习笔记】剖析MVVM框架,简单实现Vue数据双向绑定

    前言: 学习前端也有半年多了,个人的学习欲望还比较强烈,很喜欢那种新知识在自己的演练下一点点实现的过程.最近一直在学vue框架,像网上大佬说的,入门容易深究难.不管是跟着开发文档学还是视频教程,按步骤 ...

  6. 由自定义事件到vue数据响应

    前言 除了大家经常提到的自定义事件之外,浏览器本身也支持我们自定义事件,我们常说的自定义事件一般用于项目中的一些通知机制.最近正好看到了这部分,就一起看了下自定义事件不同的实现,以及vue数据响应的基 ...

  7. Vue 数据响应式原理

    Vue 数据响应式原理 Vue.js 的核心包括一套“响应式系统”.“响应式”,是指当数据改变后,Vue 会通知到使用该数据的代码.例如,视图渲染中使用了数据,数据改变后,视图也会自动更新. 举个简单 ...

  8. vue数据双向绑定原理

    vue的数据双向绑定的小例子: .html <!DOCTYPE html> <html> <head> <meta charset=utf-> < ...

  9. SSIS 数据流的执行树和数据管道

    数据流组件的设计愿景是快速处理海量的数据,为了实现该目标,SSIS数据源引擎需要创建执行树和数据管道这两个数据结构,而用户为了快速处理数据流,必须知道各个转换组件的阻塞性,充分利用流式处理流程,利用更 ...

随机推荐

  1. 【T03】理解私有地址和NAT

    1.私有地址包括三块: 10.0.0.0 到 10.255.255.255 172.16.0.0 到 172.31.0.0 192.168.0.0 到 192.168.255.255 2.私有地址接入 ...

  2. 【T01】理解面向连接和无连接协议之间的区别

    1.面向连接和无连接指的是协议,本质区别在于:对于无连接协议来说,每个分组的处理都独立于其他的分组. 而对于面向连接的协议,协议实现维护了当前分组与后继分组有关的状态信息. 2.无连接就是指udp,分 ...

  3. APICloud和海马玩模拟器结合调试手机页面

    https://blog.csdn.net/pleasecallme_522/article/details/54577904

  4. 使用quicklz缩小程序体积

    目录 简述 压缩和解压代码 压缩代码 解压代码 将二进制文件生成C数组程序代码 简述 有一个需求是这样的,写的一个程序内置了一个很大的文件(实际就是抓取epsg.io的内容里面的epsg.io.jso ...

  5. [转]抛弃jQuery,使用原生JavaScript

    原文链接 Document Ready 事件 在jQuery中,document.ready可以让代码在整个文档加载完毕之后执行: $(document).ready(function() { // ...

  6. JavaScript中的namespace

    <head> <title> New Document </title> <script> var global = window.global||{} ...

  7. mvc4 强大的导出和不需要上传文件的批量导入EXCEL--SNF快速开发平台3.1

    数据的导入导出,在很多系统里面都比较常见,这个导入导出的操作,在Winform里面比较容易实现,但在Web上我们应该如何实现呢?本文主要介绍利用MVC4+EasyUI的特点,并结合文件上传控件,实现文 ...

  8. iOS多个storyboard间跳转

    Stroyboard 可以被看作一个管理View画面的集合.也就是说一个iOS专案裡面并没有限制只能有一个Storyboard.所以在你的APP专案中,你可以把功能相近的View放到同一个APP之中, ...

  9. 【原】在Matplotlib绘图中添加Latex风格公式

    Matplotlib绘图的过程中,可以为各个轴的Label,图像的Title.Legend等元素添加Latex风格的公式. 只需要在Latex公式的文本前后各增加一个$符号,Matplotlib就可以 ...

  10. Genymotion模拟器出现INSTALL_FAILED_NO_MATCHING_ABIS 的解决办法

    下载插件: http://files.cnblogs.com/files/feijian/genymotion-arm-translation_v1.1.zip 步骤: 将模拟器运行起来,然后将下载好 ...