<!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. scrapy实战1分布式爬取有缘网（6.22接口已挂）：

    直接上代码: items.py # -*- coding: utf-8 -*- # Define here the models for your scraped items # # See docu ...

  2. Linux部署项目常用命令

    前言:一般项目都会使用阿里云等服务器作为云服务器.此时必不可免会使用到一系列常用的命令.这里我整合一下常用的命令 1.一般链接阿里云服务器常用的的是xshell跟xftp. 下载路径:https:// ...

  3. 网络设置管理 NetSetMan Pro v4.7.1 Lite 绿色便携版

    下载地址:点我 基本介绍 Netsetman是一个小巧好用的工具,你可以设置六组不同的网络参数值,针对不同的网络环境,而调用不同的参数,当你在家中.学校.工作单位等不同环境切换网络配置文件时,只需要通 ...

  4. markdown的博客

    测试一下markdown写博客 function firstProgram() { console.log("This is my first markdown blog"); }

  5. 我的it博客开张啦

    今天怀着激动地心情,在这里写下第一篇开博.之前也在新浪.网易等申请过博客,并且将新浪博客作为我的个人技术博客,当有一天看到cnblog时,觉得这里的博客以一本精美的书的批复呈现时,顿觉得很有...咋说 ...

  6. Neo4j电影关系图Cypher

    , tagline:'Welcome to the Real World'}) }) }) }) }) }) }) }) CREATE (Keanu)-[:ACTED_IN {roles:['Neo' ...

  7. springboot3(目录结构)

    2.springboot中的目录结构 1.基本信息 - static :保存所有的静态资源,css.js.img - templates :保存所有的模版页面(springboot内嵌tomcat,默 ...

  8. 今天来聊Java ClassLoader

    背景 类加载机制作为一个高频的面试题经常会在面试中被问到,前几天一个电话面试就问到,之前有了解过,但是没有梳理成自己的体系,所以说的有点凌乱,今天花点时间整理一下,分享给大家同时自己也好好梳理一下,顺 ...

  9. TP 5.0 架构 简介

    TP 5.0 架构 简介 thinkphp 5.0 为API开发而设计的的高性能框架,是与以往thinkphp5.0以下版本大不相同的新型框架,病对以颠覆和重构版本,采用全新的架构思想,引入了更多的P ...

  10. python load,loads,dumps,dump区别

    json 模块提供了一种很简单的方式来编码和解码JSON数据. 其中两个主要的函数是 json.dumps()和 json.loads() , 要比其他序列化函数库如pickle的接口少得多. 下面演 ...