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. SpringMVC在对应绑定不同实体,但具有相同属性名的解决方案....

    在springmvc中,可以对前台传递过来的参数进行与后台实体绑定(第二种方式相对较好). 比如: 前台页面: <form action="${pageContext.request. ...

  2. Git学习总结(4)——我的Git忽略文件

    *.bak *.txt *.vm .gitignore #svn .svn/ # built application files *.apk *.ap_ # files for the dex VM ...

  3. BigInteger类(高精度整型)

    位置:java.math.BigInteger 作用:提供高精度整型数据类型及相关操作 一.基本介绍 BigInteger为不可变的任意精度的整数(对象创建后无法改变,每次运算均会产生一个新的对象). ...

  4. Vijos——T 1016 北京2008的挂钟 || 洛谷—— P1213 时钟

    https://www.luogu.org/problem/show?pid=1213 题目描述 考虑将如此安排在一个 3 x 3 行列中的九个时钟: 目标要找一个最小的移动顺序将所有的指针指向12点 ...

  5. B - Networking

    B - Networking 思路:并查集板子. #include<cstdio> #include<cstring> #include<iostream> #in ...

  6. POJ 2134

    这道题屡交屡错,什么鬼!!!!明明就是一个简单的BFS,啊~!!!!!~~~~~~就是一个简单的BFS!!!!~~~~~什么鬼!!!!!!! FUCK,在discuss里也很多人吐槽,怪不得那么少人做 ...

  7. springmvc+spring+jpa(hibernate)+redis+maven配置

    废话不多少 项目结构 pom.xml配置例如以下 <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi=& ...

  8. iOS-UIImageView载入网络下载的图片(异步+多线程)

    最原始的载入网络下载的图片方式: //最原始载入网络图片方法,相当堵塞主线程,界面卡顿 -(void)setImageWithURL:(NSString *)imageDownloadUrl{ UII ...

  9. HTTP协议头了解

    Cache-Control:max-age =0 Cache-Control no-cache — 强制每次请求直接发送给源服务器,而不经过本地缓存版本的校验.这对于需要确认认证应用很有用(可以和pu ...

  10. dns tunnel C&C

    通过DNS控制主机以及执行命令 我的ubuntu 安装过程 1854 mkdir dns_tunnel_tool 1855 cd dns_tunnel_tool/ 1856 ls 1857 git c ...