vue 过滤器 基本用法
使用地点:双花括号插值和v-bind表达式。
<div id="app">
<p>{{ message|capitalize}}</p>
<div v-bind:id="message|capitalize"></div>
</div>
new Vue({
el:"#app",
data:{
message:"pwd"
},
filters:{
capitalize:function(value){
return value+'a'
}
}
})
注意:过滤器函数接收的第一个值是message,依次是传的值。
过滤器是可以叠加的,后面过滤器接收前面过滤器的返回值。
<div id="app">
<div v-bind:id="message|capitalize('a','b')|gl"></div>
</div>
var app=new Vue({
el:"#app",
data:{
pwd:"pwd"
},
filters:{
capitalize:function(value,x,y){
return value+x+y;
},
gl:function(value){
value=value.toString();
return value.toUpperCase();
}
}
})
vue 过滤器 基本用法的更多相关文章
- 第六节:Vue过滤器的用法和自定义过滤器
1.过滤器的用法,用 '|' 分割表达式和过滤器. 例如:{{ msg | filter}} {{msg | filter(a)}} a就标识filter的一个参数. 用两个过滤器:{{ ...
- 换个角度使用VUE过滤器
换个角度使用VUE过滤器 过滤器在Vue中的主要用于文本格式化,如小写转大小,日期格式化等操作.官方对这个功能介绍也很简单,不过确实很简单,就一个函数而已.但最近在做两款APP时,遇到一些特殊的需求. ...
- 带你掌握Vue过滤器filters及时间戳转换
摘要:Vue的filters过滤器是比较常见的一个知识点,下面我将结合时间戳转换的例子带你快速了解filters的用法. 本文分享自华为云社区<三分钟掌握Vue过滤器filters及时间戳转换& ...
- Vue组件基础用法
前面的话 组件(Component)是Vue.js最强大的功能之一.组件可以扩展HTML元素,封装可重用的代码.根据项目需求,抽象出一些组件,每个组件里包含了展现.功能和样式.每个页面,根据自己所需, ...
- Vue 过滤器的使用
Vue官方文档是这样说的:Vue过滤器用于格式化一些常见的文本. 在实际项目中的使用: 定义过滤器 在src定义一个filter.js文件,里面定义过滤器函数,在最后要使用 exprot defaul ...
- checkbox在vue中的用法小结
关于checkbox多选框是再常见不过的了,几乎很多地方都会用到,这两天在使用vue框架时需要用到checkbox多选功能,实在着实让我头疼,vue和原生checkbox用法不太一样,之前对于vue插 ...
- checkbox在vue中的用法总结
前言 关于checkbox多选框是再常见不过的了,几乎很多地方都会用到,这两天在使用vue框架时需要用到checkbox多选功能,实在着实让我头疼,vue和原生checkbox用法不太一样, 之前对于 ...
- vue 过滤器filters的使用以及常见报错小坑(Failed to resolve filter)
今天使用vue 过滤器中发现一个小坑,网上查到的大都是不正确的解决方法,故分享给大家: 原错误代码: // 过滤器 filter:{ FdishList:function(value){ if (!v ...
- vue过滤器微信小程序过滤器和百度智能小程序过滤器
因为最近写了微信小程序和百度小程序,用到了过滤器,感觉还挺好用的,所以就来总结一下,希望能帮到你们. 1. 微信小程序过滤器: 1.1:首先建一个单独的wxs后缀的文件,一般放在utils文件夹里面. ...
随机推荐
- Linux kernel的中断子系统之(七):GIC代码分析
返回目录:<ARM-Linux中断系统>. 总结: 原文地址:<linux kernel的中断子系统之(七):GIC代码分析> 参考代码:http://elixir.free- ...
- elasticsearch 的安装配置与spring boot的整合应用
linux上的elasticsearch安装 一.下载elasticsearch 直接进入elasticsearch的官网,下载最新的安装包:https://www.elastic.co/downlo ...
- Graphviz--图形绘制工具
可以试试ProcessOn.com, 一个专业在线画流程图的工具,使用Chrome&Firefox浏览器,支持快捷键,非常方便.快捷键如下:Ctrl+A 全选,当移动整张图时非常方便Ctrl+ ...
- JavaScript设计模式 Item 5 --链式调用
1.什么是链式调用 这个很容易理解,例如: $(this).setStyle('color', 'red').show(); 一般的函数调用和链式调用的区别:调用完方法后,return this返回当 ...
- javascript系列2 -- 闭包详解
转发请标明来源:http://www.cnblogs.com/johnhou/p/javascript.html 请尊重笔者的劳动成果 --John Hou 今天我们从内存结构上来讲解下 java ...
- Vue在MVC中的进行前后端的交互
Vue在MVC中的进行前后端的交互 Preface: 由于最近在研究前端相关的技术,作为前端非常优秀的框架Vue,个人在学习的过程中遇到一些问题,网上相关资料有限,所以在这这里总结一下个人使用Vue的 ...
- Python Web 框架:Tornado
1.Tornado Tornado:python编写的web服务器兼web应用框架 1.1.Tornado的优势 轻量级web框架 异步非阻塞IO处理方式 出色的抗负载能力 优异的处理性能,不依赖多进 ...
- java基础学习周计划之2--面向对象
JAVA面向对象第一天一. 知识点:1. 类和对象二. 关键问题(理论):1. 简述什么是类.什么是对象2. 简述基本类型变量与引用类型变量赋值时的差别3. 简述null的含义三. 关键代码(操作): ...
- nsq源码阅读笔记之nsqd(四)——Channel
与Channel相关的代码主要位于nsqd/channel.go, nsqd/nsqd.go中. Channel与Topic的关系 Channel是消费者订阅特定Topic的一种抽象.对于发往Topi ...
- BZOJ_2039_[2009国家集训队]employ人员雇佣_ 最小割
BZOJ_2039_[2009国家集训队]employ人员雇佣_ 最小割 Description 作为一个富有经营头脑的富翁,小L决定从本国最优秀的经理中雇佣一些来经营自己的公司.这些经理相互之间合作 ...