<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<h1>{{666.66222 | toRMB}}</h1>
<h1>{{888.33388 | toFixed}}</h1>
<h1>{{money | toFixed | toRMB}}</h1>
<h1>{{text | readMore(15,'...')}}</h1>
</div>
</body>
</html>
<script>
Vue.filter("toRMB",function(value){
return `￥${value}`;
})
new Vue({
el:"#app",
data:{
money:292.59,
text:"hello world,hello vue"
},
filters:{
toFixed:function(money){
return money.toFixed(1)
},
readMore:function(value,length,suffix){
console.log(arguments);
return value.substr(0,length) + suffix
}
}
})
</script>

vue过滤器的使用的更多相关文章

  1. Vue 过滤器的使用

    Vue官方文档是这样说的:Vue过滤器用于格式化一些常见的文本. 在实际项目中的使用: 定义过滤器 在src定义一个filter.js文件,里面定义过滤器函数,在最后要使用 exprot defaul ...

  2. vue 过滤器filters的使用以及常见报错小坑（Failed to resolve filter）

    今天使用vue 过滤器中发现一个小坑,网上查到的大都是不正确的解决方法,故分享给大家: 原错误代码: // 过滤器 filter:{ FdishList:function(value){ if (!v ...

  3. vue过滤器微信小程序过滤器和百度智能小程序过滤器

    因为最近写了微信小程序和百度小程序,用到了过滤器,感觉还挺好用的,所以就来总结一下,希望能帮到你们. 1. 微信小程序过滤器: 1.1:首先建一个单独的wxs后缀的文件,一般放在utils文件夹里面. ...

  4. 换个角度使用VUE过滤器

    换个角度使用VUE过滤器 过滤器在Vue中的主要用于文本格式化,如小写转大小,日期格式化等操作.官方对这个功能介绍也很简单,不过确实很简单,就一个函数而已.但最近在做两款APP时,遇到一些特殊的需求. ...

  5. 3.Vue过滤器

    1.概念: Vue.js 允许你自定义过滤器,可被用作一些常见文本的格式化,过滤器可以用在两个地方:mustache 插值和 v-bind 表达式.过滤器应该被添加在 JavaScript 表达式的尾 ...

  6. 黑马vue---31-32、vue过滤器实例

    黑马vue---31-32.vue过滤器实例 一.总结 一句话总结: vue内部的东西,无论是过滤器还是组件,都是键值对的方式 1.过滤器的定义语法? Vue.filter('过滤器的名称', fun ...

  7. 带你掌握Vue过滤器filters及时间戳转换

    摘要:Vue的filters过滤器是比较常见的一个知识点,下面我将结合时间戳转换的例子带你快速了解filters的用法. 本文分享自华为云社区<三分钟掌握Vue过滤器filters及时间戳转换& ...

  8. Vue - 过滤器

    1.内部过滤器 1):字母操作: ---- 针对字符串 A:capitalize B:uppercase C:lowercase 2):json过ingfy滤器,可将表达式的值转化为Json字符串,本 ...

  9. Vue 过滤器与计算属性

    过滤器 V1.x 版本 过滤器基础 过滤器是一个通过输入数据,能够及时对数据进行处理并返回一个数据结果的简单函数.Vue有很多很便利的过滤器,可以参考官方文档,http://cn.vuejs.org/ ...

  10. 第六节：Vue过滤器的用法和自定义过滤器

    1.过滤器的用法,用  '|' 分割表达式和过滤器. 例如:{{ msg |  filter}}     {{msg | filter(a)}}  a就标识filter的一个参数. 用两个过滤器:{{ ...

随机推荐

  1. TPL DataFlow .Net 数据流组件，了解一下

    回顾上文 作为单体程序,依赖的第三方服务虽不多,但是2C的程序还是有不少内容可讲: 作为一个常规互联网系统,无外乎就是接受请求.处理请求,输出响应. 由于业务渐渐增长,数据处理的过程会越来越复杂和冗长 ...

  2. ReentrantLock源码的一点总结

    ReentrantLock 是可重入锁,可重入锁的意思就是同一个线程可以重复获得该锁. 如何做到可重复获得该锁?计数器实现. 第一次加锁,cas比较是不是0,是0设置为1,并设置当前拥有锁的线程: 第 ...

  3. C++学习书籍推荐《More Effective C++》下载

    百度云及其他网盘下载地址:点我 编辑推荐 <More Effective C++:35个改善编程与设计的有效方法(中文版)>:传世经典书丛 媒体推荐 <Effective c++&g ...

  4. 一个超级简单的Jetty实例

    Maven: <!-- https://mvnrepository.com/artifact/org.mortbay.jetty/jetty --> <dependency> ...

  5. requests.exceptions.ChunkedEncodingError: ('Connection broken: IncompleteRead(0 bytes read)', IncompleteRead(0 bytes read))【已解决】

     问题: 跑python自动化时出现报错如下图 解决: requests请求时,后面加上参数:stream=True. 参考外国小哥:https://stackoverflow.com/questio ...

  6. 个人永久性免费-Excel催化剂功能第61波-快速锁定解锁单元格及显示隐藏公式

    Excel的所有功能都是需求导向的,正因为有客户在企业管理的过程中,有这样的需求出现了,然后相应的Excel就出现了相应的功能来辅助管理,学习Excel的功能,其实真的可以学习到先进企业的许多的管理思 ...

  7. 前端框架——树形结构Ztree的使用

    地址 官网:http://ztree.me 码云:https://gitee.com/zTree/zTree_v3 可以实现效果 使用方式 下载资源文件,引入到自己的项目中 <head> ...

  8. 简单分析线程获取ReentrantReadWriteLock 读锁的规则

    1. 问题 最近有同事问了我一个问题,在Java编程中,当有一条线程要获取ReentrantReadWriteLock的读锁,此时已经有其他线程获得了读锁,AQS队列里也有线程在等待写锁.由于读锁是共 ...

  9. ASP.NET Core 中的管道机制

    首先,很感谢在上篇文章 C# 管道式编程 中给我有小额捐助和点赞的朋友们,感谢你们的支持与肯定.希望我的每一次分享都能让彼此获得一些收获,当然如果我有些地方叙述的不正确或不当,还请不客气的指出.好了, ...

  10. 解决Windows10下安装Ubuntu16.04双系统后开机没有Ubuntu引导

    转载 https://blog.csdn.net/qq_27838307/article/details/79149791 1.按照网上教程在磁盘中压缩硬盘并且不需要给他新建卷标,就让他显示空闲就好了 ...