vue实现简单的过滤器
html片段:
<script src="https://unpkg.com/vue"></script> <div id="app">
<p>{{ message | capitalize}}</p>
</div>
js片段:
全局过滤器:
Vue.filter('capitalize', function (data) {
let arr = data.split('/');
return arr[2] + '(' + arr[0] + arr[1] + ')';
})
new Vue({
el: '#app',
data: {
message: '湖南省/长沙市/岳麓区岳麓大道588号'
} })
组件本地过滤:
new Vue({
el: '#app',
data: {
message: '湖南省/长沙市/岳麓区岳麓大道588号'
},
filters:{
capitalize: (data) => {
let arr = data.split('/');
return arr[2] + '(' + arr[0] + arr[1] + ')';
}
} })
结果:
岳麓区岳麓大道588号(湖南省长沙市)
///括号变红色
html:
<script src="https://unpkg.com/vue"></script> <div id="app">
<p><span>{{ message | district}}</span><font color="red">{{ message | city}}</font></p>
</div>
js:
new Vue({
el: '#app',
data: {
message: '湖南省/长沙市/岳麓区岳麓大道588号'
},
filters:{
district: (data) => {
let arr = data.split('/');
let str = arr[2];
return str;
},
city: (data) => {
let arr = data.split('/');
let str = '(' + arr[0] + arr[1] + ')'
return str;
}
} })
效果:
vue实现简单的过滤器的更多相关文章
- vue学习(十五) 过滤器简单实用
vue过滤器: 概念:vue.js允许你自定义过滤器可被用作一些常见文本的格式化.过滤器可以用在两个地方:插值表达式 v-bind表达式 由管道符指示 //过滤器调用时候的格式 {{ name ...
- Vue自带的过滤器
gitHub地址:https://github.com/lily1010/vue_learn/tree/master/lesson05 一 过滤器写法 {{ message | Filter}} 二 ...
- vue.js学习 自定义过滤器使用(1)
在这个教程中,我们将会通过几个例子,了解和学习VueJs的过滤器.我们参考了一些比较完善的过滤器,比如orderBy 和 filterBy.而且我们可以链式调用过滤器,一个接一个过滤.因此,我们可以定 ...
- 沉淀,再出发:VUE的简单理解
沉淀,再出发:VUE的简单理解 一.前言 Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的渐进式框架.Vue 只关注视图层,采用自底向上增量开发的设计.Vue 的目标是通过 ...
- vue 生命周期钩子 过滤器 计算属性
每一个Vue实例在被创建之前都要经过一系列的初始化过程.例如,实例需要配置数据观测.编译模板.挂载实例到DOM,然后在数据变化时更新DOM,在这个过程中,实例也会调用一些生命周期钩子,这就给我们提供了 ...
- day 83 Vue学习四之过滤器、钩子函数、路由、全家桶等
Vue学习四之过滤器.钩子函数.路由.全家桶等 本节目录 一 vue过滤器 二 生命周期的钩子函数 三 vue的全家桶 四 xxx 五 xxx 六 xxx 七 xxx 八 xxx 一 Vue的过滤 ...
- react构建淘票票webapp,及react与vue的简单比较。
前言 前段时间使用vue2.0构建了淘票票页面,并写了一篇相关文章vue2.0构建淘票票webapp,得到了很多童鞋的支持,因此这些天又使用react重构了下这个项目,目的无他,只为了学习和共同进步! ...
- vue.js之生命周期,防止闪烁,计算属性的使用,vue实例简单方法和循环重复数据
摘要:今天是比较糟糕的一天没怎么学习,原因是学校的wifi连不上了~~.今天学习一下vue的生命周期,如何防止闪烁(也就是用户看得到花括号),计算属性的使用,vue实例简单方法,以及当有重复数据时如何 ...
- Vue的简单入门
Vue的简单入门 一.什么是Vue? vue.js也一个渐进式JavaScript框架,可以独立完成前后端分离式web项目 渐进式:vue可以从小到控制页面中的一个变量后到页面中一块内容再到整个页面, ...
随机推荐
- 七十二、SAP中内表的修改,添加条件语句,多条目修改
一.代码如下 二.MODIFY执行前断点数据 三.查看到数据如下 四.往下单步走一步,发现有3条数据被修改 五.执行后修改如下
- 二十二、SAP中创建一个内表,并添加内容循环输出显示
一.直接上代码 二.输出如下
- mysql union 和union all
http://www.w3school.com.cn/sql/sql_union.asp
- 利用QRCoder生成二维码
1.项目添加QRCoder.dll 和System.Drawing.dll的引用 2.创建二维码公共处理类(QRCoderHelper.cs) /// <summary> /// 二维码公 ...
- 自定义spark UDAF
官网链接 样例代码: import java.util.ArrayList; import java.util.List; import org.apache.spark.sql.Dataset; i ...
- 一万五千字的Dissertation你真的会写了吗?
在英国留学的同学们想要顺利毕业,就必须要过Dissertation这一关.而一篇Dissertation字数可能多大一万五千字,其写作难度之大让很多留学生疯狂吐槽.那么这么多字的Dissertatio ...
- Elasticsearch 搜索API
章节 Elasticsearch 基本概念 Elasticsearch 安装 Elasticsearch 使用集群 Elasticsearch 健康检查 Elasticsearch 列出索引 Elas ...
- Linux每日练习-crontab
- EUI库 - 概述
新特性 36k 访问EUI组件宽高时,也会跟原生显示对象的表现一致,立即能得到包含子项的宽高值 统一的显示列表 普通对象和eui对象都可用addChild来添加 一个逻辑组件只管 ...
- springboot + shiro+登录 微信登录 次数验证资料
分享一个朋友的人工智能教程.零基础!通俗易懂!风趣幽默!大家可以看看是否对自己有帮助,点击查看教程. 1.https://blog.csdn.net/xtiawxf/article/details/5 ...