vue如何自定义一个过滤器

html代码:

<div id="app">
<input type="text" v-model="msg" />
{{msg| capitalize }}
</div>

  JS代码:

var vm=new Vue({
el:"#app",
data:{
msg:''
},
filters: {
capitalize: function (value) {
if (!value) return ''
value = value.toString()
return value.charAt(0).toUpperCase() + value.slice(1)
}
}
})

全局定义过滤器

Vue.filter('capitalize', function (value) {
if (!value) return ''
value = value.toString()
return value.charAt(0).toUpperCase() + value.slice(1)
})

vue自定义一个过滤器的更多相关文章

  1. ng自定义一个过滤器

    ng允许我们自定义指令 下面来我们自己来定义一个过滤指令:filter,返回一个函数的形式 filter(name,callback(){//name:过滤器的名字,callback:匿名函数 ret ...

  2. angularJS自定义一个过滤器

    ng允许我们自定义指令 下面来我们自己来定义一个过滤指令:filter,返回一个函数的形式 filter(name,callback(){//name:过滤器的名字,callback:匿名函数 ret ...

  3. Vue 自定义一个插件的用法、小案例及在项目中的应用

    1.开发插件 install有两个参数,第一个是Vue构造器,第二个参数是一个可选的选项对象   MyPlugin.install = function (Vue, options) {   // 1 ...

  4. vue自定义一个v-model

    目标 js <template> <my-form v-model="form"> </my-form> </template> & ...

  5. 用Vue开发一个实时性时间转换功能,看这篇文章就够了

    前言 最近有一个说法,如果你看见某个网站的某个功能,你就大概能猜出背后的业务逻辑是怎么样的,以及你能动手开发一个一毛一样的功能,那么你的前端技能算是进阶中高级水平了.比如咱们今天要聊的这个话题:如何用 ...

  6. Vue自定义过滤器

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

  7. Vue学习之过滤器和自定义指令小结(三)

    过滤器: 过滤是一个数据经过了这个过滤之后出来另一样东西,可以是从中取得你想要的,或者给那个数据添加点什么装饰.过滤器就是过滤用的工具.渲染数据用的!!! 我们需要知道的是: 1.Vue中的过滤器不能 ...

  8. vue自定义过滤器的创建与使用

    原文地址 过滤器:生活中有很多例子,净水器 空气净化器 .过滤器的作用:实现数据的筛选.过滤.格式化. vue1.*版本是有内置的过滤器,但是在vue2.*所有的版本都已经没有自带的过滤器了. 1.过 ...

  9. 黑马vue---28、vue中全局过滤器的基本使用

    黑马vue---28.vue中全局过滤器的基本使用 一.总结 一句话总结: vue中的过滤器可以传递参数(根据参数来过滤),也可以用管道符拼接多个过滤器:例如<p>{{ msg | msg ...

随机推荐

  1. socket 客户端的认证

    一:使用 hashlib 进行加密验证: # server.py 服务端 import os import socket import hashlib ​ def check_conn(conn): ...

  2. 【codeforces 805B】3-palindrome

    [题目链接]:http://codeforces.com/contest/805/problem/B [题意] 让你生成一个只包含a,b,c的字符串; 要求c出现的次数最少,且任意一个 长度为3的子串 ...

  3. Inflation System Properties

    https://blogs.oracle.com/buck/inflation-system-properties I wanted to write a quick post about the t ...

  4. T4系列文章之1:认识T4

    一.导读 MSDN:Code Generation and T4 Text Templates 博客园:编写T4模板进行代码生成 Oleg Sych系列文章:http://www.olegsych.c ...

  5. Java n个线程轮流打印数字的问题

    一. 实现两个线程.轮流打印出数字.例如以下: bThread --> 10 aThread --> 9 bThread --> 8 aThread --> 7 bThread ...

  6. Java数据结构(排序篇)

    冒泡排序:是经过n-1趟子排序完毕的,第i趟子排序从第1个数至第n-i个数,若第i个数比后一个数大(则升序,小则降序)则交换两数.大泡在上,小泡在下. 选择排序:每一趟从待排序的数据元素中选出最小(或 ...

  7. Keyboard的显示与隐藏

    一个控制键盘显示与隐藏的工具类分享给大家 public class KeyBoardTool { /** * 假设输入法在窗体上已经显示.则隐藏.反之则显示 * @param context */ p ...

  8. NYOJ_94 cigarettes 递归VS迭代

    题目地址 分析: 英文题事实上看懂意思和正常的也都差点儿相同.就算有几个单词不认识也无伤大雅. 一共同拥有n支烟,每天抽k支. 每抽完k支,会得到一仅仅. a组数据.  输入n k的个数.输出一共抽了 ...

  9. 【转】iOS多语言本地化(国际化)设置

    原文网址:http://www.jianshu.com/p/2b7743ae9c90 讨论的iOS应用中的多语言设置,Ok 一般是两种情况: 1.根据当前设备语言自动切换显示 2.在应用中可进行语言设 ...

  10. Linux uname 命令 打印系统信息

    转自:https://www.jb51.net/LINUXjishu/417626.html 1.概述 打印系统信息 2.命令格式 uname [OPTION]... 3.常用命令参数 打印一些系统信 ...