vue学习二（过滤器）
1.全局过滤器
{{user.gender|gfilter}}
Vue.filter("gfilter",function (val) {
if (val == 1) {
return "男...";
} else {
return "女...";
}
})
2.局部过滤器
例子：
1 <!DOCTYPE html>
2 <html lang="en">
3
4 <head>
5 <meta charset="UTF-8">
6 <meta name="viewport" content="width=device-width, initial-scale=1.0">
7 <title>Document</title>
8 </head>
9
10 <body>
11 <script src="../node_modules/vue/dist/vue.js"></script>
12 <!--过滤器常用户来处理文本格式化的操作 过滤器还可以用在两个地方：花括号查之和v-bind 表达式-->
13 <div id="app">
14 <ul>
15 <li v-for="user in users">
16 {{user.id}} ==> {{user.name}} ==> {{user.gender==1?"男":"女"}}
17 {{user.gender|genderfilter}}
18 {{user.gender|gfilter}}
19 </li>
20 </ul>
21 </div>
22 <script>
23
24 Vue.filter("gfilter",function (val) {
25 if (val == 1) {
26 return "男...";
27 } else {
28 return "女...";
29 }
30 })
31
32
33 let vm = new Vue({
34 el: "#app",
35 data: {
36 users: [{ id: 1, name: "wanghaha1", gender: 1 },
37 { id: 2, name: "wanghaha2", gender: 0 }]
38 },
39 filters: { //此为局部过滤器
40 genderfilter(val) {
41 if (val == 1) {
42 return "男";
43 } else {
44 return "女";
45 }
46 }
47 }
48 })
49
50
51
52 </script>
53 </body>
54
55 </html>
vue学习二（过滤器）的更多相关文章
- day 82 Vue学习二之vue结合项目简单使用、this指向问题
Vue学习二之vue结合项目简单使用.this指向问题 本节目录 一 阶段性项目流程梳理 二 vue切换图片 三 vue中使用ajax 四 vue实现音乐播放器 五 vue的计算属性和监听器 六 ...
- day 81 Vue学习二之vue结合项目简单使用、this指向问题
Vue学习二之vue结合项目简单使用.this指向问题 本节目录 一 阶段性项目流程梳理 二 vue切换图片 三 vue中使用ajax 四 vue实现音乐播放器 五 vue的计算属性和监听器 六 ...
- Vue学习之过滤器和自定义指令小结（三）
过滤器: 过滤是一个数据经过了这个过滤之后出来另一样东西,可以是从中取得你想要的,或者给那个数据添加点什么装饰.过滤器就是过滤用的工具.渲染数据用的!!! 我们需要知道的是: 1.Vue中的过滤器不能 ...
- vue教程(二)--过滤器和监视改动功能
过滤器filter: 1.将数据进行添油加醋的操作. 2.过滤器分两种: 组件内的过滤器(组件内有效). 全局过滤器 组件内:filters:{过滤器名:过滤器函数fn},fn内通过return 返回 ...
- Vue学习(二)-Vue中组件间传值常用的几种方式
版本说明:vue-cli:3.0 主要分为两类: 1.父子组件间的传值 2.非父子组件间的传值 1.父子组件间传值 父组件向子组件传值 第一种方式: props 父组件嵌套的子组件中,使用v-bind ...
- Vue学习二：v-model指令使用方法
本文为博主原创,未经允许不得转载: <!DOCTYPE html> <html lang="zh"> <head> <script src ...
- vue学习二:
vue的常用标签: 1.<router-link to=''>主要实现跳转链接功能,属性to='/'即是跳转到path为'/'的路径. 2.v-bind动态绑定指令,格式为:v-bind: ...
- 02.VUE学习二之数据绑定
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http ...
- vue 学习二 深入vue双向绑定原理
vue双向绑定原理 请示总体来讲 就是为data的中的每个属性字段添加一个getter/seter属性 以此来追踪数据的变化,而执行这部操作,依赖的就是js的Object.defineProperty ...
- vue 学习 二
动画 <transition name="fade"> <p v-if="show">hello</p> </tran ...
随机推荐
- Qt编写可视化大屏电子看板系统21-数据转曲线
一.前言 数据转曲线,这个用的非常多,比如串口或者网络收到的数据,对特定的字节数据绘制实时的曲线,或者对历史记录存储的数据进行曲线绘制,按照约定的规则,数据转曲线绘制必须提供规则,没有规则只能对所有数 ...
- Qt编写安防视频监控系统28-摄像机点位
一.前言 摄像机点位的功能主要是在图片地图和在线离线地图上设置对应摄像机的位置,然后双击可以实时预览对应摄像机的视频,在图片地图上拖动摄像机图标到对应位置,系统会自动保存位置信息,在网页地图上的摄像机 ...
- IM开发者的零基础通信技术入门(十)：零基础，史上最强5G技术扫盲
本文引用了"鲜枣课堂"的<史上最强5G科普>文章内容.为了更好的内容呈现,在引用和收录时内容有改动,转载时请注明原文来源. 1.内容概述 ➊ 5G技术的关注度越来越高: ...
- kubernetes系列(二) - kubectl的入门操作
目录 1. 安装 / 卸载 1 .1 前提条件 1.2 安装方式 1.3 卸载 2. 通过 minikube 学习 k8s 实操基础 2.1 创建集群 2.2 部署应用 2.3 探索当前应用[故障排除 ...
- Transformer 原理图解
转载:小白看得懂的 Transformer (图解) 引言 谷歌推出的BERT模型在11项NLP任务中夺得SOTA结果,引爆了整个NLP界.而BERT取得成功的一个关键因素是Transformer的强 ...
- HERS: Homomorphically Encrypted Representation Search-2020：学习
阅读"HERS: Homomorphically Encrypted Representation Search-2020",记录笔记. 摘要 本文介绍了一种针对加密图像的搜索方法 ...
- 一些devops、软件工程的个人感悟
1.devops不是简单的工具,是思想. (1)devops核心在于快速编译构建.自动测试化.自动部署发布 (2)工具只是辅助手段,无论是Jenkins.腾讯蓝盾等等,甚至是手动bat+bash搭建, ...
- .NET 中 Logger 常被忽视的方法 BeginScope
BeginScope 方法是 .NET 中 ILogger 接口的一部分,用于创建日志记录的作用域(Scope).这种作用域可以将特定的上下文信息包含在日志中,从而提高日志的可读性和调试效率. 配置日 ...
- redis启停shell脚本
启停脚本(redis-5.0.5) 一.编辑脚本 vim /u01/redis/redisServer.sh #!/bin/sh # # Simple Redis init.d script conc ...
- Handbook of Enumerative Combinatorics 阅读
Chapter 1 代数几何方法 Part1 代数方法 1.3 生成函数 符号化方法和拉格朗日反演 拆分数的生成函数和五边形数定理.斐波那契的拆分数 平面二叉树(Plane Binary Tree). ...