文档章节

Vue.js学习系列(二十二)--过滤器

博为峰教研组
 博为峰教研组
发布于 2017/03/15 19:52
字数 278
阅读 18
收藏 0

Vue.js 允许你自定义过滤器,被用作一些常见的文本格式化。由"管道符"

指示, 格式如下:

<!-- 在两个大括号中 -->

{{ message | capitalize }}

 

<!-- 在 v-bind 指令中 -->

<div v-bind:id="rawId | formatId"></div>

过滤器函数接受表达式的值作为第一个参数

下面我们通过一个例子将输入的字符串第一个字母转化为大写

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>

<script src="src/vue.min.js"></script>

</head>

<body>

<div id="app">

  {{ message | capitalize }}

</div>

 

<script>

new Vue({

  el: '#app',

  data: {

message: 'code'

  },

  filters: {

    capitalize: function (value) {

      if (!value) return ''

      value = value.toString()

      return value.charAt(0).toUpperCase() + value.slice(1)

    }

  }

})

</script>

</body>

</html>

运行结果如下:


 

由显示结果可以看出,输出的结果code第一个字母是大写的。

过滤器可以串联:

{{ message | filterA | filterB }}

过滤器是 JavaScript 函数,因此可以接受参数:

{{ message | filterA('arg1', arg2) }}

这里,message 是第一个参数,字符串 'arg1' 将传给过滤器作为第二个参数, arg2 表达式的值将被求值然后传给过滤器作为第三个参数。

© 著作权归作者所有

博为峰教研组
粉丝 51
博文 1224
码字总数 479077
作品 0
黄浦
程序员
私信 提问
vue.js快速入门。

什么是Vue.js   Vue.js是一个构建数据驱动的web界面的库。技术上,它重点集中在MVVM模式的ViewModel层,因此它非常容易学习,非常容易与其它库或已有项目整合。   Vue.js的目标是通过尽可...

笔阁
2015/12/23
10.3K
2
Vue.js进阶教程第一步:vue2.0前端-何韬-专题视频课程

Vue.js进阶教程第一步:vue2.0前端—22327人已学习 课程介绍 Vue.js2.0进阶教程第一部分,Vue.js框架基础入门视频课程主要学习Vue.js的基础语法结构,api使用方式,vue.js组件的驱动方式,如...

pkutao
2017/01/04
0
0
Vue 与Angular、React框架的对比,你会学哪个?

首先,我们先了解什么是MVX框架模式? MVX框架模式:MVC+MVP+MVVM 1.MVC:Model(模型)+View(视图)+controller(控制器),主要是基于分层的目的,让彼此的职责分开。 View通过Controller来和M...

阿K1225
2018/10/29
171
0
Vue新手向:14篇教程带你从零撸一个Todo应用

欢迎来到 Vue2.x Todo 系列教程,这个教程将手把手教你从零开始使用 Vue 搭建一个 Todo(待办事项)应用。 书写此教程的动机 Vue 作者尤雨溪在 新手向:Vue 2.0 的建议学习顺序 中给出了中肯...

追梦人物
01/16
0
0
Vue实现前后端分离项目的初体验

Vue实现前后端分离项目的初体验 经过之前学习的Vue的知识: vue基本指令 vue组件 vue-resource vue路由 其实我们已经可以开始实战运用到实际的Web项目中了,由于本人是Java后端开发的,所以后...

TyCoding
2018/09/01
2.2K
0

没有更多内容

加载失败,请刷新页面

加载更多

PostgreSQL 11.3 locking

rudi
今天
5
0
Mybatis Plus sql注入器

一、继承AbstractMethod /** * @author beth * @data 2019-10-23 20:39 */public class DeleteAllMethod extends AbstractMethod { @Override public MappedStatement injectMap......

一个yuanbeth
今天
10
1
一次写shell脚本的经历记录——特殊字符惹的祸

本文首发于微信公众号“我的小碗汤”,扫码文末二维码即可关注,欢迎一起交流! redis在容器化的过程中,涉及到纵向扩pod实例cpu、内存以及redis实例的maxmemory值,statefulset管理的pod需要...

码农实战
今天
4
0
为什么阿里巴巴Java开发手册中不建议在循环体中使用+进行字符串拼接?

之前在阅读《阿里巴巴Java开发手册》时,发现有一条是关于循环体中字符串拼接的建议,具体内容如下: 那么我们首先来用例子来看看在循环体中用 + 或者用 StringBuilder 进行字符串拼接的效率...

武培轩
今天
8
0
队列-链式(c/c++实现)

队列是在线性表功能稍作修改形成的,在生活中排队是不能插队的吧,先排队先得到对待,慢来得排在最后面,这样来就形成了”先进先出“的队列。作用就是通过伟大的程序员来实现算法解决现实生活...

白客C
今天
81
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部