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. 2019-04-03 Anaconda+VSCode搭建python开发环境,并连接GIthub

    1.最好的Python开发环境 :Anaconda+VSCode搭建python开发环境,conda提供了python开发环境和大量的你不用安装的库 conda的环境变量: 直接在conda 中下载启 ...

  2. web端实现图片放大切换显示预览

    项目中会遇到多张图片点击放大显示原图,并且能够左右滑动切换显示图片的需求,这种效果主要通过js来实现,下面我介绍的主要是借助swiper.js来实现这个完整的功能, 点击“查看协议” => 图片 ...

  3. java+selenium+testNG+excel 实现 web 网页的自动化测试

    webdriver的关键字从excel读取,这样测试人员只需要在excel中填写相关用例即可 前端微站和后台系统的用例可整合在同一excel中,这样可实现前端与后台的闭循环测试 除了一些基本的校验规则 ...

  4. BA-siemens-insight报警设置

    以0007001(DDC-B3-09)为例,介绍insight报警的设置方法:

  5. 数据库连接池dataesoruce pool深入理解

    8.数据库连接池的connection都是长连接的,以方便多次调用,多人连续使用.dataSourcePool9.数据库连接池中的连接,是在你用完之后,返回给数据库连接池的,并不是close()掉,而 ...

  6. Project Euler:Problem 88 Product-sum numbers

    A natural number, N, that can be written as the sum and product of a given set of at least two natur ...

  7. Ubuntu下的用户和权限(三)

    七.增删群组相关的命令 相同的我们要先介绍两个重要的设定档:/etc/group和/etc/gshadow,前面那个事实上和/etc/passwd一样.而后者就是群组的password表了.先看看长啥 ...

  8. android WebViewClient和WebChromeClient

    一.Android之WebViewClient与WebChromeClient的区别 ANDROID应用开发的时候可能会用到WEBVIEW这个组件,使用过程中可能会接触到WEBVIEWCLIENT与W ...

  9. windows2003安装

    产品密钥JCDPY-8M2V9-BR862-KH9XB-HJ3HMiis的i386文件夹http://pan.baidu.com/s/1dD0EY6twindows2003的iso映像http://p ...

  10. 2019黑马JAVAEE57期基础班就业班(全套)

    黑马java57期 百度网盘 2019黑马JAVAEE57期基础班就业班(全套)百度网盘 下载 Spring全家桶解决方案 - 微服务认证解决方案(JWT) - 微服务网关解决方案(Zuul) 黑马j ...