1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.     <title>Document</title>
  8. </head>
  9. <body>
  10.     <div id="app"></div>
  12.     <script src="../node_modules/vue/dist/vue.js"></script>
  13.     <script>
  15.         /* 过滤器的使用：为了将数据做一些处理后才渲染出来，
  16.         它可以用在组件的内部为该组件服务，也可以声明为全局的过滤器
  17.         下面来看下组件里面过滤器的用法:首先在组件里定义后过滤器的方法，
  18.         然后在使用时使用：要过滤的value | 过滤器名 即可。
  19.         */
  21.         var App = {
  22.             template: `<div>我是局部组件～
  23.             <p>我是使用过滤器后的时间： {{ time | myTimeFilter}}</p>
  24.             </div>`,
  25.             data(){
  26.                 return {
  27.                     time: '2019-06-25'
  28.                 }
  29.             },
  30.             // 声明过滤器
  31.             filters: {
  32.                 // 过滤器将日期中的-替换为/
  33.                 myTimeFilter(value) {
  34.                     return value.replace(/-/g, '/');
  35.                 }
  36.             }
  37.         };
  39.         new Vue({
  40.             el: '#app',
  41.             // 使用局部组件
  42.             template: `
  43.                 <App />
  44.             `,
  45.             data:function(){
  46.                 return {}
  47.             },
  48.             // 挂载局部组件
  49.             components: {
  50.                 App
  51.             }
  52.         });
  53.     </script>
  54. </body>
  55. </html>

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

  1. Vue自定义过滤器

    gitHub地址: https://github.com/lily1010/vue_learn/tree/master/lesson05 一 自定义过滤器(注册在Vue全局) 注意事项: (1)全局方 ...

  2. vue filter过滤器简单应用

    vue中过滤器,用于一些常见的文本格式化,用 | 来操作. 过滤器可以用在两个地方: 1.在{{}}双花括号中插入值 2.v-bind表达式中使用 <!-- 在双花括号中 --> {{ m ...

  3. vue filters过滤器

    vue filters过滤器 vue.js允许我们自定义过滤器,可被使用于一些常见的文本格式化,过滤器可以用在两个地方,双花括号插值和 v-bind表达式.最常见的就是双花括号插值. 比如如下代码:{ ...

  4. vue的过滤器

    Vue.Js 提供了强大的过滤器API,能够对数据进行各种过滤处理,返回需要的结果 vue的过滤器一般在JavaScript 表达式的尾部,由“|”符号指示: 过滤器可以让我们的代码更加优美,一般可以 ...

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

    1.简单介绍   过滤器的作用:实现数据的筛选.过滤.格式化.   过滤器的本质是一个有参数,有返回值的方法.   过滤器可以用在两个地方:双花括号插值和v-bind表达式(后者从2.1.0+开始支持 ...

  6. VUE：过滤器及日期格式化moment库

    VUE:过滤器及日期格式化moment库 <!DOCTYPE html> <html> <head> <meta charset="UTF-8&qu ...

  7. VUE笔记 - 过滤器 Vue.filter 形参默认值 @keyup.f2 自定义按键修饰符

    过滤器函数的传参: 第一个参数 A 是固定的,表示要过滤之前的内容. 第二个参数 B,表示要把原本的内容 A 过滤成 B. 写函数内容时, 这里第二处只写个参数. 实际的值要写到管道符调用函数的括号内 ...

  8. 六、vue基础--过滤器定义

    七.过滤器定义 1.使用:{{username|strip}}.<a :href="url|strip">百度</a> 2.定义:都是定义一个函数,这个函数 ...

  9. vue 时间过滤器

    过滤器:定义:对要显示的数据进行特定格式化后再显示(适用于一些简单逻辑的处理).语法:1.注册过滤器: Vue.filter(name ,callback)或new Vue{filters:{}}2. ...

  10. vue（4）—— vue的过滤器，监听属性，生命周期函数，获取DOM元素

    过滤器 vue允许自定义过滤器,我个人认为,过滤器有两种,一种是对数据的清洗过滤,一种是对数据切换的动画过滤 数据切换的动画过滤 这里还是利用前面的动态组件的例子: 这里由于没办法展示动画效果,代码如 ...

随机推荐

  1. centos安装xen虚拟机并且配置bridge

    主要参考的几个官方文档: http://wiki.centos.org/HowTos/Xen/Xen4QuickStart 在centos上安装xen组件并建立dom0 http://wiki.cen ...

  2. （二十八）分类信息的curd-分类信息删除

    删除分类步骤分析: 1.在list.jsp上编写 删除连接 /store/adminCategory?method=delete&cid=?? 2.在delete方法中 获取cid 调用ser ...

  3. HDU 5882 Balanced Game (水题)

    题意:问 nnn 个手势的石头剪刀布游戏是否能保证出每种手势胜率都一样. 析:当每种手势的攻防个数完全相等才能保证平衡,所以容易得出 nnn 是奇数时游戏平衡,否则不平衡. 也就是说打败 i 的和 i ...

  4. LightOJ 1140 How Many Zeroes? (数位DP)

    题意:统计在给定区间内0的数量. 析:数位DP,dp[i][j] 表示前 i 位 有 j 个0,注意前导0. 代码如下: #pragma comment(linker, "/STACK:10 ...

  5. 878. Nth Magical Number

    A positive integer is magical if it is divisible by either A or B. Return the N-th magical number.  ...

  6. IT兄弟连 JavaWeb教程 Servlet会话跟踪 Cookie技术简介

    Cookie的英文原意是“点心”,它是在客户端访问Web服务器时,服务器在客户端硬盘上存放的信息,好像是服务器送给客户的“点心”.服务器可以根据Cookie来跟踪客户状态,这对于需要区别客户的场合(如 ...

  7. YCOJ单向公路

    题目: 描述 某地区有许多城镇,但并不是每个城镇都跟其他城镇有公路连接,并且有的公路并不能双向行驶.现在我们把这些城镇间的公路分布及允许的行驶方向告诉你,你需要编程解决通过公路是否可以从一个城镇到达另 ...

  8. Ubuntu 18.04 LTS 常见问题解决 2

    1 每次重启后都有system program problem detected sudo gedit /etc/default/apport 然后将打开的文件中的enabled=1改为0,原因暂时不 ...

  9. Jmeter之Json Path Extractor 接受上一个请求的响应参数

    最近在使用Jmeter进行接口测试,被一个问题困扰了很久,就是第二个请求如何接收上一个请求响应中的参数,刚开始尝试着用网上普遍说的正则表达式,长了了N多次之,都没有达到我想要的效果,被整的够惨,于是, ...

  10. 1536 不一样的猜数游戏 dp思维 + 找规律

    http://www.51nod.com/onlineJudge/questionCode.html#!problemId=1536 首先,要知道值为n的答案,则可以这么去想,知道值为n - 1的答案 ...