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 ...
随机推荐
- 有道云笔记默认的笔记格式转markdown
目录 0. 前言 1. 有道云笔记自带的笔记格式转markdown的方案 1.1 pdf => md 1.2 pdf => word => md 2. Markdown技巧 2.1 ...
- 在 Vercel 部署随机图 API
在本文中,将详细介绍如何在 Vercel 平台上部署一个具有分类功能的随机图片 API.通过这个 API,用户可以根据不同的分类获取随机图片链接,并且还可以从所有分类中随机获取一张图片. 项目结构 首 ...
- AI对开发过程的替代性
在过去一年投入人工智能辅助开发之后,虽然大家说使用了人工智能之后工作效率显着提高,但我们日常使用的实际软件似乎并没有明显改善.所以问题出现在哪里? 使用场景 目前团队AI使用主要在以下方面: 代码补全 ...
- Swagger介绍和应用
1.什么是swaggerSwagger是一个规范和完整的框架,用于生成.描述.调用和可视化RESTful风格的Web服务.简单来说,Swagger是一个功能强大的接口管理工具,并且提供了多种编程语言的 ...
- Java版的对象关系映射实现
在前面的几篇文章中,实现了获得基本类型的默认值,基本数据类型的转换等,主要的目标就是实现一个Java版的对象关系映射程序. 思路如下: 1: 对象必须是一个Java Bean. 2: 遍历对象的所有以 ...
- 闲话 717 - LGV 引理的小应用
这是我们的某一天的联考题目: \(n\le 500\). 显然使用平面图完美匹配计数可以获得 \(O(n^6)\),但是有一种神秘的对路径的双射.当时我们都认为这是超级人类智慧,但是今天看书发现是书上 ...
- Flink-cdc同步mysql到iceberg丢失数据排查
一.获取任务信息 任务id:i01f51582-d8be-4262-aefa-000000 任务名称:ods_test1234 丢失的数据时间:2024-09-16 09:28:47 二.数据同步查看 ...
- maven项目中解决 .git文件太大问题
一.git项目上传后项目文件太大,git filter-branch手动清理 最近发现一个项目git目录已经达到200MB,严重影响了clone代码.操作之前请全量备份代码,操作失误可恢复 二.测试项 ...
- Luogu P10838 『FLA - I』庭中有奇树 题解 [ 绿 ] [ 二分 ] [ 双指针 ] [ 树的遍历 ]
庭中有奇树:很多算法揉在一起的好题. 转化题意 因为要封锁 \(m\) 条路径,根据贪心思想,他一定会封锁最短的 \(m\) 条路径.所以我们能走的最短传送路径就是最短的第 \(m+1\) 条路径. ...
- Luogu P9180 [COCI2022-2023#5] Slastičarnica 题解 [ 蓝 ] [ 区间 dp ] [ dp 状态优化 ] [ 前缀和优化 ]
Slastičarnica:非常好的区间 dp 题. 暴力 不难设计出暴力状态:\(dp_{q,i,j}\) 表示进行到第 \(q\) 次操作,剩下区间 \([i,j]\) 是否可行. 直到全部状态都 ...